对象作为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;

我做错了什么?

当前回答

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

这个错误似乎也发生在你无意中发送一个复杂的对象，其中包括例如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

其他回答

只是添加到其他选项，我试图通过点方法访问主对象内的嵌套对象，如: this.state.arrayData.CompleteAdress.Location 在这种情况下，位置是完整地址内嵌套的对象，这就是为什么我不能简单地用点符号访问它。

因此，如果您面临同样的问题，请尝试JSON。解析，以便访问嵌套对象，然后进行相应操作。

2020-06-23 08:47:11

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

例如:数据是

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

        )
    }
}

2021-08-19 17:13:20

您的数据家是一个数组，因此您必须使用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>
  );

2018-09-20 15:52:19

同样的错误，但是不同的场景。我打算将我的自定义功能组件分配给第三方模块的layoutComponent道具。

错误代码:

customLayout = () => {
// function returning a component
}
//usage:
{customLayout}

Fix:

CustomLayout = () => {
// functional component
}
//usage:
<CustomLayout></CustomLayout>

2021-07-23 11:29:02

就我而言，我做到了

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

而不是

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

双花括号。

2021-11-29 12:31:07

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

推荐文章

最新文章

标签