無法將對象數組從父級傳遞到子級組件

Question

我試圖將對象的數組（最終將由實際數據的axios調用替換）從父對象傳遞到子組件，再從一個子組件傳遞到其他子組件，我無法通過，因為我收到一條錯誤消息，提示“對象無效作為一個React子對象（找到：帶有keys的對象）。如果要渲染子對象的集合，請改用數組。”

/ABC.js

import React from 'react'
import ABCD from '../ABCD/ABCD'

const plans = [
  {
    id:'1',
    title:'option 1',
    value:'option1',
    name:'option'
  },
  {
    id:'2',
    title:'option 2',
    value:'option2',
    name:'option'
  }
]
const ABC = () => {
  return (
    <div>
      {
        plans.map( plan => {
          return(
            <ABCD data={plan} />
           );
        })
     }
    </div>

  );
}

export default ABC

//ABCD.JS

import React from 'react'

const ABCD = ({data}) => {
  return (
    <div>
      {data} //Here as of now data is being used , will be replaced by other child components 
    </div>
  );
}

export default ABCD

預期結果應該是對象數組的顯示，但是實際輸出是錯誤消息，內容為“對象作為React子對象無效（找到：帶有鍵{id，title，value，name}的對象）。”如果要渲染子集，請改用數組。”

Answer 1

如果要再次將數據發送給任何子級，請執行與父級組件相同的操作。 請注意渲染對象。 您不能直接渲染對象，您在那里遇到的錯誤非常清楚。 您需要以某種方式呈現對象的屬性。

 const plans = [ { id:'1', title:'option 1', value:'option1', name:'option' }, { id:'2', title:'option 2', value:'option2', name:'option' } ] const ABC = () => { return ( <div> { plans.map( plan => { return( <ABCD data={plan} /> ); }) } </div> ); } const ABCD = ({data}) => { return ( <div> <SecondChild data={data} /> <ThirdChild value={data.value} /> </div> ); } const SecondChild = ({ data }) => <div>{data.id}</div> const ThirdChild = ({ value }) => <div>{value}</div> ReactDOM.render(<ABC />, document.getElementById("root")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root" /> 

Answer 2

data是一個對象，您不能渲染它，因為它不是有效的React Element 。

因此，在這種情況下<div>{data}</div> ，這將不起作用。

而是簡單地做，

{
   data.map((dataObject)=><div>{dataObject.name}</div>)
}