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

我做错了什么?

当前回答

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

        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

其他回答

我也发生了错误，我通过删除花括号来解决它，希望它能帮助其他人。

你可以看到，我没有把con放在花括号里，错误发生了，当我移除粗括号时，错误消失了。

const modal = (props) => {
const { show, onClose } = props;

let con = <div className="modal" onClick={onClose}>
        {props.children}
        </div>;

return show === true ? (
    {con}
) : (
    <div>hello</div>
);

有一篇文章是关于花括号的用法的。点击这里

2021-01-24 09:01:50

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

我面对的正是这个错误。在追踪这个问题的根本原因时，我发现FRONTEND代码(React)正在调用API，并通过访问该响应的某些属性在页面上显示响应! 在这种情况下，有两种情况

该属性在后台的响应中不存在(它会抛出不同的错误) 或来自后端响应的属性是一个复杂的对象(对象中的对象)，我们的前端React组件试图访问它，但是无法读取，因为React需要一个STRING(通过直接访问特定的属性，例如Object.property)或数组。(这种情况下)

所以我们收到这个错误，因为React期待STRING但得到了对象(因为你在对象内部传递object)。

请检查发送响应的后端逻辑(API)。

2021-04-13 05:46:18

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

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

2020-10-02 17:04:39

虽然不是特定于答案，但此错误主要发生在在JavaScript上下文中使用{}错误地使用JavaScript表达式时。

例如

let x=5;

export default function App(){ return( {x} ); };

正确的做法是

let x=5;
export default function App(){ return( x ); };

2020-06-25 09:10:14

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

推荐文章

最新文章

标签