对象作为 React 子级无效。如果您打算渲染一组孩子，请改用数组

Question

我正在设置一个带有 Rails 后端的 React 应用程序。我收到错误消息“对象作为 React 子对象无效（找到：带有键 {id、name、info、created_at、updated_at} 的对象）。如果您打算渲染一组子对象，请改用数组。”

这是我的数据的样子：

[
    {
        "id": 1,
        "name": "Home Page",
        "info": "This little bit of info is being loaded from a Rails
        API.",
        "created_at": "2018-09-18T16:39:22.184Z",
        "updated_at": "2018-09-18T16:39:22.184Z"
    }
]

我的代码如下：

import React from 'react';

class Home extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      homes: []
    };
  }

  componentDidMount() {
    fetch('http://localhost:3000/api/homes')
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            homes: result
          });
        },
        // error handler
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {

    const { error, isLoaded, homes } = this.state;

    if (error) {
      return (
        <div className="col">
          Error: {error.message}
        </div>
      );
    } else if (!isLoaded) {
      return (
        <div className="col">
          Loading...
        </div>
      );
    } else {
      return (
        <div className="col">
          <h1>Mi Casa</h1>
          <p>This is my house y'all!</p>
          <p>Stuff: {homes}</p>
        </div>
      );
    }
  }
}

export default Home;

我究竟做错了什么？

原文由 iChido 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的数据 homes 是一个数组，因此您必须使用 Array.prototype.map() 对数组进行迭代才能使其工作。

 return (
 <div className="col">
 <h1>Mi Casa</h1>
 <p>This is my house y&apos;all!</p>
 {homes.map(home => <div>{home.name}</div>)}
 </div>
 );

原文由 Karl Taylor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我在创建自定义模式时遇到了类似的错误。

 const CustomModal = (visible, modalText, modalHeader) => {}

根据 REACT 文档，问题是我忘记了功能组件只能传递一个 prop 给它们：

这个函数是一个有效的 React 组件，因为它接受一个带有数据的“props”（代表属性）对象参数并返回一个 React 元素。我们称这些组件为“函数组件”，因为它们实际上是 JavaScript 函数。 反应文档

因此，当我们想要传递多个变量时，我们需要将它们包装到一个对象或数组中，并将指针传递给该数组或对象。并在调用组件之前在组件端对其进行解构。或者，我们可以使用花括号来指示我们正在发送一个具有相同属性名称和包含这些属性值的变量的对象，就像这里的例子一样。然后定义函数也可以在对象中包含的属性到达时进行解构。

 const CustomModal = ({visible, modalText, modalHeader}) => {}

如果你有多个值要传递给组件，你应该传递一个对象，因此在它的属性/变量周围加上大括号（假设它们具有相同的名称）。

原文由 Oskari Lehtonen 发布，翻译遵循 CC BY-SA 4.0 许可协议