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

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 }