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

Question

我正在设置“我的帐户”页面，我需要显示在componentDidMount（）函数之后创建的有效负载。但是，当我设置我的状态并渲染它时，我收到一个错误说：对象作为React子对象无效（找到：具有键{_ id，first_name，middle_name，last_name，dob，email，address，__ v}的对象）。如果您要渲染子集合，请使用数组。我只想在此页面上显示我在有效负载中定义的信息。我尝试用数组初始化状态，但是我的输出每次都会中断。class MyAccount extends Component {   state = {     data: 'default'     };   async componentDidMount() {     const payload = { email: "[e-mail]",        name: "Tynan McGrady",        surname: "",       middleName:  "",       number: "(805) 240-555",       adress: "1555 s. east ridge",};     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} </p>预期结果，使用this.state.data或类似内容在页面上显示项目这些是我得到的错误：对象作为React子对象无效（找到：具有键{_ id，first_name，middle_name，last_name，dob，email，address，__ v}的对象）。如果您要渲染子集合，请使用数组。

Answer 1

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

例如...

{ this.state.data.first_name }