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

我做错了什么?


当前回答

就我而言,我做到了

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

而不是

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

双花括号。

其他回答

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

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

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

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

而不是

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

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

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

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

这招奏效了。

在我的情况下,我有一个添加的异步在app.js如下所示。

const App = async() => {
return(
<Text>Hello world</Text>
)
}

但这并不是必须的,在测试某些内容时,我已经添加了它,并且不再需要它。移除它之后,如下图所示,事情开始工作了。

 const App =() => {
    return(
    <Text>Hello world</Text>
    )
}

为了我的案子

 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函数之后没有返回语句

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

你可以看到,我没有把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>
);

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