Question

我目前正试图让自己熟悉反应和组件的状态。

我正在尝试创建一个组件，使用构造函数初始化状态，对服务器执行get请求以获取对象数组，最后我尝试相应地更新组件的状态。但我最终得到以下错误，我无法理解这个问题：

对象作为React子对象无效（找到：具有键{title，content}的对象。）

我的代码如下所示：

import React, { Component } from 'react';
import axios from "axios";

class Display extends Component {

  constructor(){
    super();
    this.state = { posts: []}
  }

  componentDidMount(){
    this.fetchData();
  }

  fetchData(){
    const ROOT_URL = "http://localhost:5000";
    axios.get(`${ROOT_URL}/api/post`)
      .then(response => response.data.map(post => (
        {
        title: post.title,
        content: post.content
      }))
    )
    .then(
      posts => {
                this.setState({
                  posts
                })
               }
        )
   }

  render(){
    const { posts } = this.state;
    return (
      <div className="article">
        List of Posts: 
        {this.state.posts}
      </div>
    )
  }
}

export default Display;

有谁知道我做错了什么？

由于

Answer 1

this.state.posts是一个像

这样的对象

  {
    title: post.title,
    content: post.content
  }

因此你不能像

一样直接渲染它

  <div className="article">
    List of Posts: 
    {this.state.posts}
  </div>

您可以将其渲染为

 <div className="article">
    List of Posts: 
    {this.state.posts.map((post) => {
        return <div>
            <div>{post.title}</div>
            <p>{post.content}</p>
        </div>
    })
 </div>

上面

假设content也不是object或array。查看How to render an array of objects了解详情

Answer 2

您需要遍历posts数组并返回要显示的html

像这样的东西

List of Posts: 
    {this.state.posts.map(post=>(
      <div> 
        <span>{post.title}</span>
        <p>{post.content}</p>
      </div>
    ))}

修改组件状态 - 错误：对象作为React子级无效

2 个答案: