如何正确初始化我的状态，然后将该数据呈现到页面上答案

【问题标题】：How do i properly initialize my state, and then render that data onto the page如何正确初始化我的状态，然后将该数据呈现到页面上
【发布时间】：2019-10-04 04:14:12
【问题描述】：

我正在设置一个“我的帐户”页面，我需要显示在 componentDidMount() 函数之后创建的有效负载。但是，当我设置状态并呈现它时，只有我的电子邮件呈现。我如何访问其余的有效负载

import React, { Component } from "react";
import axios from "axios";
//import...


//const StyledCard 

const StyledDiv = styled.div`
  margin-top: 100px;
  margin-right: 15px;
  margin-left: 15px;
`;

class MyAccount extends Component {

  state = {
    data: ['default',],

    };


  async componentDidMount() {
    const payload = { email: "tynantynan8@gmail.com",
       name: "Tynan McGrady",
       surname: "",
      middleName:  "",
      number: "(805) 240-6258",
      adress: "407 s. mayfair ave",};


   //var payload = ["tynantynan8@gmail.com", "Tynan McGrady", " ", " ","(805) 240-6258","407 s. mayfair ave"];
    await axios
      .post("http://localhost:1234/user/profile", payload)
      .then(res => {
        const data = res.data;
        console.log(data);


        this.setState({
          data:data
        })


      });




}
  render() {

    return (
      <container>
        <row>
          <StyledDiv>
            <StyledCard>
              <Card.Header as="h5">Profile</Card.Header>          
              <Card.Body>


                <Container>
                <Row>

                  <p> {this.state.data.email} </p>
        <p> {this.state.data.name} </p>
                </Row>
                </Container>
              </Card.Body>
            </StyledCard>

          </StyledDiv>
        </row>
      </container>
    );
  }
}

export default MyAccount;

预期结果，使用 this.state.data 或类似的东西在页面上显示项目

这些是我得到的错误：

对象作为 React 子对象无效（找到：带键的对象 {_id, 名字，中间名，姓氏，出生日期，电子邮件，地址，__v}）。如果你意味着渲染一组孩子，请改用数组。

【问题讨论】：

Objects are not valid as a React child. If you meant to render a collection of children, use an array instead的可能重复
不要试图像这样直接渲染你的数据。如您所见，您无法渲染对象。单独使用它的属性，比如 first_name、middle_name 等。如果它是一个数组，你应该映射它。

标签： javascript reactjs

【解决方案1】：

因为this.state.data 是一个对象，您需要访问对象内部的键才能显示它们。

例如...

{ this.state.data.first_name }

【讨论】：

【解决方案2】：

你不能渲染对象可以渲染的东西是 * 字符串 * 成分 * 组件数组 * DOM 对象来自响应的数据是和对象。从对象中获取需要的信息，然后显示例如：{ this.state.data.value }

【讨论】：

我如何从对象中获取所需的信息，然后显示它。我的代码在上面