对象作为React子对象无效。如果要呈现子元素的集合，请使用数组

我正在设置一个带有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;

我做错了什么?

当前回答

在设置为UseState之前，我在使用BigNumber库的值时出现了这个错误:

const { toBN } = web3.utils;
...
 setOwner0Balance(toBN(await getBalance(owner0)));

2021-05-24 18:58:05

其他回答

我希望它能帮助到其他人。

这个错误似乎也发生在你无意中发送一个复杂的对象，其中包括例如Date to React子组件。

它传递给子组件new Date('....')的示例如下:

 const data = {name: 'ABC', startDate: new Date('2011-11-11')}
 ...
 <GenInfo params={data}/>

如果你将它作为子组件参数的值发送，你将发送一个复杂的对象，你可能会得到如上所述的相同错误。

检查是否传递了类似的东西(在底层生成复杂的Object)。相反，您可以将该日期作为字符串值发送，并在子组件中执行新日期(string_date)。

2020-03-06 14:31:40

我也有同样的问题。在我的情况下，我没有呈现项目的价值。我最初的代码是，

        keyExtractor={(item, index) => item.id}
        data={courseGoals} 
        renderItem={itemData => (
          <View style={styles.listitem}> 
              <Text>{itemData.item}</Text> 
          </View>
        )} 
      />

我只是简单地加了一句。价值’，而且它起作用了!

        keyExtractor={(item, index) => item.id}
        data={courseGoals} 
        renderItem={itemData => (
          <View style={styles.listitem}> 
              <Text>{itemData.item.value}</Text> 
          </View>
        )} 
      />

2021-08-12 11:25:47

为了我的案子

 return (
    <div >
      {updated.map((one) => {
        <div>
          <h2>{one.name}</h2>
        </div>
      })}

    </div>
  );

然后改为

 return (
    <div >
      {updated.map((one,index) => {
        return (
          <div key={index}>
          <h2>{one.name}</h2>
          </div>
        )
      })}

    </div>
  );

问题是在map函数之后没有返回语句

2021-08-18 21:19:07

在您的状态下，home被初始化为一个数组家庭:[]

在返回中，尝试呈现home(这是一个数组)。 < p >东西:{家园}< / p >

不能这样做——如果你想渲染它，你需要渲染一个数组到每个单独的项目。例如:使用map()

Ex:{家(item = >)的项目文件夹。

2020-11-12 04:08:02

同样的错误，但场景不同。我的状态是

        this.state = {
        date: new Date()
    }

所以当我在我的类组件中问它时，我有

p>Date = {this.state.date}</p>

而不是

p>Date = {this.state.date.toLocaleDateString()}</p>

2020-12-30 19:27:17

对象作为React子对象无效。如果要呈现子元素的集合，请使用数组

推荐文章

最新文章

标签