第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會有你想問的

從 axios 響應(yīng)對象呈現(xiàn)對象數(shù)組

從 axios 響應(yīng)對象呈現(xiàn)對象數(shù)組

猛跑小豬 2022-09-29 15:54:08
我正在嘗試在響應(yīng)對象內(nèi)呈現(xiàn)一個(gè)對象數(shù)組,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}的任何錯(cuò)誤,但是一旦我放入{item.posts},我就收到此錯(cuò)誤錯(cuò)誤:對象作為React子級無效(找到:具有鍵的對象{_id,價(jià)格})。如果要呈現(xiàn)子級集合,請改用數(shù)組。
查看完整描述

3 回答

?
心有法竹

TA貢獻(xiàn)1866條經(jīng)驗(yàn) 獲得超5個(gè)贊

如果要將整個(gè)數(shù)組呈現(xiàn)為文本,則需要解析它,并且來自a-kon的答案應(yīng)該可以完成工作。


但是,如果您想為每個(gè)帖子渲染一個(gè)元素(例如div),您也需要使用map函數(shù)。


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>

    );


查看完整回答
反對 回復(fù) 2022-09-29
?
揚(yáng)帆大魚

TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超9個(gè)贊

看來你已經(jīng)熟悉地圖了,你可以再次使用它:

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


查看完整回答
反對 回復(fù) 2022-09-29
?
一只斗牛犬

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超2個(gè)贊

您正在嘗試在此處呈現(xiàn)一個(gè)數(shù)組:posts<p> posts: {item.posts}</p> //React will not render this array of objects

不能呈現(xiàn)對象數(shù)組。但是您可以呈現(xiàn)它的 JSON 表示形式:<p> posts: {JSON.stringify(item.posts)}</p>


查看完整回答
反對 回復(fù) 2022-09-29
  • 3 回答
  • 0 關(guān)注
  • 159 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號