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

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" />