如何在React JS中渲染对象

debugcn 发表于 Dev

PEEMAPOD NEAMKUR

如何在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] 删除。