从 axios 响应对象渲染一个对象数组答案

【问题标题】：rendering an array of objects from the axios response object从 axios 响应对象渲染一个对象数组
【发布时间】：2020-06-10 22:36:18
【问题描述】：

我正在尝试在我从 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，价格}）。如果您打算渲染一组子项，请改用数组。

【问题讨论】：

标签： javascript reactjs axios

【解决方案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>
    );

【讨论】：

【解决方案2】：

看来你对map已经很熟悉了，可以再用一次：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：