如何在JSX中渲染对象?我不知道任何呈现对象的方法。您能否给我展示一个如何呈现此数据的示例方法?我想呈现对象Data(Object)中的所有数据
import React from "react";
import { connect } from "react-redux";
import Container from "@material-ui/core/Container";
import Typography from "@material-ui/core/Typography";
import { firestore } from "../../firebase/firebase.utils";
class Profile extends React.Component {
constructor(props) {
super(props);
this.state = {
User: {},
};
}
componentDidMount() {
const { uid } = this.props.currentUser;
firestore
.collection("users")
.doc(uid)
.get()
.then((doc) => {
this.setState({
User: doc.data(),
});
console.log(this.state.User);
})
.catch((err) => {
console.log("Error getting documents", err);
});
}
render() {
return (
<Container
maxWidth="lg"
style={{ paddingTop: "2%", paddingBottom: "2%" }}
>
I want to show all data on this
</Container>
);
}
}
const mapStateToProps = (state) => ({
currentUser: state.user.currentUser,
});
export default connect(mapStateToProps)(Profile);
您可以显示这样的数据。
render() {
const { User } = this.state;
const { email, displayName } = User || {};
return (
<Container
maxWidth="lg"
style={{ paddingTop: '2%', paddingBottom: '2%' }}
>
<h2>{email}</h2>
<h2>{displayName}</h2>
</Container>
);
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句