在嵌套响应中设置状态

Question

我正在构建一个 React 应用程序，我正在将 state 设置为 api 或 nested response 或 nested state，但是状态没有按照我想要的方式设置。

从 api

收到的响应

[
    {
        "id": 70,
        "title": "feefifef",
        "images": [
            {
                "id": 28,
                "text": "First Image"
                "blog_id": 70,
            },
            {
                "id": 28,
                "text": "First Image",
                "blog_id": 70,
            }
        ]
    }
]

App.js

class App extends React.Component {
    constructor(props){
    super(props)

    this.state = {
        blogs = [
           {
            id: 0,
            title: "",
            images: [
                 {
                    id:0, 
                    text:""
                 }
               ]
            }
          ]
        }
    }

    componentDidMount() {
    let data;

    axios.get('http://127.0.0.1:8000/api/blogs/').then((res) => {
        data = res.data;
        this.setState({
            blogs: data.map((blog) => {
                return Object.assign({}, blog, {
                id: blog.id,
                title: blog.title,
                images: blog.images,
                }
                })
            })
        })
    }

    render() {

         const blogs = this.state.blogs.map((blog) => (
           <BlogList
              id={blog.id}
              title={blog.title}
              images={blog.images}
           />
        ))
    }

    return (
         <div>{blogs}</div>
    )

}


class BlogList extends React.Component {
    constructor(props){
        super(props)
    }


    return (
         <div>
            Title: {this.props.title}

            Images: {this.props.images}
         </div>
    )
}

有什么问题吗？

Title 后图像未显示。我正在尝试显示每个博客 BlogList class 中的所有图像。

我也试过使用（在BlogList class）

this.props.images.map((img) => {
    return (
        <div>
        Title: {this.props.title}

        Images: {img.text}
        </div>
    )
}

但它向我展示了

this.props.images.map is not a function.

然后我认为问题出在 setting state 个图像上（我可能错了）。

当我尝试打印 this.props.images 然后它显示

0: {id: 28, text: '1111', blog_id: 71}
length: 1
[[Prototype]]: Array(0)

我是 React 新手，非常感谢任何帮助。提前致谢

Answer 1

this.props.images 是一个数组，因此您不能直接使用 {this.props.images}。否则你会得到这样的错误“对象作为 React 子项无效。如果你打算渲染一个子项集合，请改用数组”

你必须使用这样的东西

render() {
    return (
      <div>
        Title: {this.props.title} <br/>
        Images:
        {this.props.images?.map((image, i) => (
          <div key={image.id}>
            {image.id}<br/>
            {image.text}<br/>
            {image.blog_id} <br/>
           </div>
        ))}
      </div>
    );
  }

在嵌套响应中设置状态

setting state within nested response

javascript

dictionary

reactjs