对象作为 React 子对象无效.如果您打算渲染一组子项，请改用数组 [英] Objects are not valid as a React child. If you meant to render a collection of children, use an array instead

问题描述

我正在设置一个带有 Rails 后端的 React 应用程序.我收到错误消息对象作为 React 子对象无效(找到:带有键 {id, name, info, created_at, updated_at} 的对象).如果您打算渲染子项集合，请改用数组."

这是我的数据的样子:

<预><代码>[{身份证":1，"name": "主页","info": "这一点信息是从 Rails 加载的API.","created_at": "2018-09-18T16:39:22.184Z","updated_at": "2018-09-18T16:39:22.184Z"}]

我的代码如下:

从'react'导入React；class Home 扩展 React.Component {构造函数(道具){超级(道具)；this.state = {错误:空，isLoaded: 假，家园:[]};}componentDidMount() {fetch('http://localhost:3000/api/homes').then(res => res.json()).然后((结果) =>{this.setState({isLoaded: 真,家:结果});},//错误处理程序(错误) =>{this.setState({isLoaded: 真,错误});})}使成为() {const { error, isLoaded, home } = this.state;如果(错误){返回 (<div className="col">错误:{error.message}

);} else if (!isLoaded) {返回 (<div className="col">正在加载...

);} 别的 {返回 (<div className="col"><h1>Mi Casa</h1><p>你们都是我的房子！</p><p>东西:{homes}</p>

);}}}导出默认首页；

我做错了什么?

解决方案

您的数据 homes 是一个数组，因此您必须使用 Array.prototype.map() 使其工作.

返回(<div className="col"><h1>Mi Casa</h1><p>这是我的房子，你们都是！</p>{homes.map(home => <div>{home.name}</div>)}

);

I am setting up a React app with a Rails backend. I am getting the error "Objects are not valid as a React child (found: object with keys {id, name, info, created_at, updated_at}). If you meant to render a collection of children, use an array instead."

This is what my data looks like:

[
    {
        "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"
    }
]

My code is as follows:

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;

What am I doing wrong?

解决方案

Your data homes is an array, so you would have to iterate over the array using Array.prototype.map() for it to work.

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

这篇关于对象作为 React 子对象无效.如果您打算渲染一组子项，请改用数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！