从 axios 响应对象呈现对象数组

Question

我正在尝试在响应对象内呈现一个对象数组，im从axios返回。import React, { Component } from "react";import axios from "axios";class Bids extends Component {  state = {    adminPosts: [],  };  componentDidMount() {    this.getPosts();  }  getPosts = async () => {    let posts = await axios.get(      "http://localhost:3001/api/posts/admin"    );    let allPosts = posts.data;    this.setState({ adminPosts: allPosts });  };render() {    let items = [...this.state.adminPosts];/*This is the item array from above[  {    _id: 1,    name: "john",    posts: [      { _id: 1000, price: "100" },      { _id: 1001, price: "300" },      { _id: 1002, price: "160" },    ],  },  {    _id: 2,    name: "jack",    posts: [{ _id: 1004, price: "400" }],  },  {    _id: 3,    name: "jill",    posts: [],  },];   */    return (      <div>        <h1>hello from Sales</h1>        {items.map((item) => (          <li key={item._id}>            <div className="container">              <p> Name: {item.name}</p>              <p> posts: {item.posts}</p> //React will not render this array of objects            </div>          </li>        ))}      </div>    );  }}export default Bids;我在渲染方法中没有收到{item.name}的任何错误，但是一旦我放入{item.posts}，我就收到此错误错误：对象作为React子级无效（找到：具有键的对象{_id，价格}）。如果要呈现子级集合，请改用数组。

Answer 1

如果要将整个数组呈现为文本，则需要解析它，并且来自a-kon的答案应该可以完成工作。

但是，如果您想为每个帖子渲染一个元素（例如div），您也需要使用map函数。

return (

      <div>

        <h1>hello from Sales</h1>

        {items.map((item) => (

          <li key={item._id}>

            <div className="container">

              <p> Name: {item.name}</p>

              <div> 

                <p>posts:</p>

                {item.posts.map((post) =>(<div>

                <span>id: {post._id} </span>

                <span>price: {post.price}</span>

                </div>))}

                </div>

            </div>

          </li>

        ))}

      </div>

    );

Answer 2

看来你已经熟悉地图了，你可以再次使用它：

<p> posts: <ul>{item.posts.map(e => <li key={e._id}>price: {e.price}</li>)}</ul></p>

Answer 3

您正在尝试在此处呈现一个数组：posts<p> posts: {item.posts}</p> //React will not render this array of objects

不能呈现对象数组。但是您可以呈现它的 JSON 表示形式：<p> posts: {JSON.stringify(item.posts)}</p>