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

我做错了什么?

当前回答

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

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

2020-10-02 17:04:39

其他回答

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

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

2020-06-23 08:47:11

我有一个类似的问题，我忘记在接受组件中的参数时添加花括号{}。

我有这个:const ServiceCard =(颜色，标题，图标，subtitle) => (

然后我将其更新为:const ServiceCard =({颜色，标题，图标，subtitle}) => (

这招奏效了。

2022-02-21 07:34:27

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

我有一个类似的错误，而我正在创建一个自定义模式。

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

问题是我忘记了功能组件只能有一个道具传递给他们，根据REACT文档:

这个函数是一个有效的React组件，因为它只接受一个 “props”(代表属性)对象参数与数据和返回一个React元素。我们称这种组件为“功能组件” 因为它们是JavaScript函数。反应文档

Therefore when we want to pass several variables we need to wrap them into an object or an Array and pass the pointer to that array or object. And destructure it on the component side before invoking the component. Alternatively we can use curly braces to indicate that we are sending an object with identical property names and variables that contain the value of those properties, like in the example here. And then define the function also to destructure upon arrival of the properties contained in the object.

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

如果你有多个值要传递给组件，你应该传递一个对象，在它的属性/变量周围用花括号括起来(假设它们有相同的名字)。

2020-10-08 08:02:56

有同样的问题，在我的情况下 1. 将字符串解析为Json 2. 确保在渲染视图时不试图显示整个对象，而是显示object.value

data = [
{
    "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"
}];
var jsonData = JSON.parse(data)

然后是我的观点

return (
<View style={styles.container}>
  <FlatList
    data={jsonData}
    renderItem={({ item }) => <Item title={item.name} />}
    keyExtractor={item => item.id}
  />
</View>);

因为我使用数组，我使用平面列表来显示，并确保我与对象一起工作。值，而不是对象，否则你会遇到同样的问题

2020-05-24 07:52:19

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

推荐文章

最新文章

标签