错误：对象作为 React 子项无效

当在 React 中将对象作为子项传递给组件时，将出现错误。React只接受数组和React元素作为其子项。

问题

您尝试将一个对象作为React组件的子项传递，类似于以下代码：

const counter = {
  count: 0,
  increment: function() {
    this.count++
  }
}

function App() {
  return <div>{counter}</div>;
}

然后，您会看到以下错误：

错误：对象作为 React 子项无效(找到：带有键 {counter} 的对象).如果您打算渲染一组子项,请改用数组.

这是因为React组件只能接受数组或React元素作为其子项。

解决方案

如果您想将数据对象传递给React组件，您可以将它作为props传递给该组件。例如：

const counter = {
  count: 0,
  increment: function() {
    this.count++
  }
}

function Counter(props) {
  return <div>{props.counter.count}</div>;
}

function App() {
  return <Counter counter={counter} />;
}

这将向Counter组件传递一个名为counter的props属性，该属性是包含计数器数据的对象。Counter组件可以使用此props属性来呈现计数器的当前值。

如果您想在组件中呈现多个对象，您可以将它们存储在数组中，并将该数组作为组件的子项传递。例如：

const counters = [
  {
    count: 0,
    increment: function() {
      this.count++
    }
  },
  {
    count: 0,
    increment: function() {
      this.count++
    }
  }
]

function Counter(props) {
  return <div>{props.counter.count}</div>;
}

function App() {
  return (
    <div>
      {counters.map(counter => (
        <Counter key={counter.count} counter={counter} />
      ))}
    </div>
  );
}

这将在App组件中呈现两个计数器，并在每个计数器子项上使用唯一的键，以便React可以正确跟踪它们。

结论

React只接受数组和React元素作为其子项。如果您尝试将对象作为组件的子项传递，则会出现错误。相反，您应该将数据对象作为props传递给组件，或将它们存储在数组中并将该数组作为组件的子项传递。