Question

我正在设置“我的帐户”页面，我需要显示在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， first_name，middle_name，last_name，dob，电子邮件，地址，__ v}）。如果你打算呈现一组子代，请改用数组。

Answer 1

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

例如...

{ this.state.data.first_name }

Answer 2

您不能渲染对象可以渲染的东西是 *琴弦 * 组件 *组件数组 * DOM对象来自响应的数据为和对象。从对象获取所需信息，然后显示它例如：{this.state.data.value}

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

2 个答案: