我正在设置一个带有Rails后端的React应用程序。我得到的错误“对象是无效的React子(发现:对象与键{id,名称,信息,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;

我做错了什么?


当前回答

我也遇到过同样的问题,但现在我很高兴解决了这个问题。

NPM I core-js 把这一行放到index.js文件的第一行。 进口core-js

其他回答

在JavaScript中,数组和集合是不同的,尽管它们有点相似,但在这里react需要一个数组。 您需要从集合中创建一个数组并应用它。

let homeArray = new Array(homes.length);
let i = 0

for (var key in homes) {
    homeArray[i] =  homes[key];
    i = i + 1;
}

这个问题是因为您试图显示整个对象,而不是对象内部的键。

例如:数据是

[
    {
        "status": "success",
        "count": 20511
    },
    {
        "status": "failure",
        "count": 1776
    }
]

现在,在如下所示的组件中,这将工作。

import React, { Component } from 'react';


export default class Display extends Component {

    render() {

        const { data } = this.props;

        return (
            <>
           
               {
                   data.map((value,key)=>
                       <div>{value.status}</div>
                       <div>{value.count}</div>
                   )
               }
            </>

        )
    }
}

就我而言,我做到了

<IonListHeader>
  <IonLabel>
     Order {{index}}
  </IonLabel>
</IonListHeader>

而不是

<IonListHeader>
  <IonLabel>
     Order {index}
  </IonLabel>
</IonListHeader>

双花括号。

我也有同样的问题,然后我意识到我犯了有史以来最愚蠢的错误。我让我的组件是异步的,我的意思是我使用了async关键字,就像这样

const ComponentName = async () => {
  return <>
   <div>This a WRONG component</div>
 </>
}

然后,在经历了很多头疼和祈祷之后,我意识到我的愚蠢错误,并删除了async。

const ComponentName = () => {
  return <>
   <div>This a WRONG component</div>
 </>
}

好吧,在我的情况下,我想渲染的数据包含一个对象在数组中,因此,它会给出错误,所以对于其他人来说,请检查你的数据也一次,如果它包含一个对象,你需要将它转换为数组打印它的所有值,或者如果你需要一个特定的值,然后使用。

我的数据:

body: " d fvsdv"
photo: "http://res.cloudinary.com/imvr7/image/upload/v1591563988/hhanfhiyalwnv231oweg.png"
postedby: {_id: "5edbf948cdfafc4e38e74081", name: "vit"}       
//this is the object I am talking about.
title: "c sx "
__v: 0
_id: "5edd56d7e64a9e58acfd499f"
__proto__: Object

只打印单个值

<h5>{item.postedby.name}</h5>