无法将对象数组从父组件传递到子组件

Question

我正在尝试将对象数组（最终将替换为实际数据的 axios 调用）从父组件传递到子组件，并进一步从一个子组件传递到其他子组件，我无法传递，因为我收到错误消息“对象作为 React 子级无效（找到：带键的对象）。如果您要渲染子级集合，请改用数组。”

/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>)
}