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

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

2 个答案: