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

其他回答

好吧,在我的情况下,我想渲染的数据包含一个对象在数组中,因此,它会给出错误,所以对于其他人来说,请检查你的数据也一次,如果它包含一个对象,你需要将它转换为数组打印它的所有值,或者如果你需要一个特定的值,然后使用。

我的数据:

body: " d fvsdv"
photo: "http://res.cloudinary.com/imvr7/image/upload/v1591563988/hhanfhiyalwnv231oweg.png"
postedby: {_id: "5edbf948cdfafc4e38e74081", name: "vit"}       
//this is the object I am talking about.
title: "c sx "
__v: 0
_id: "5edd56d7e64a9e58acfd499f"
__proto__: Object

只打印单个值

<h5>{item.postedby.name}</h5>

有同样的问题,在我的情况下 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>);

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

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

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

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

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

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

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

对象作为React子对象无效

我也得到了相同的错误,但情况不同。我正在学习react useReducer钩子,并实现了一个带有增量,减量和重置按钮的计数器,我试图在屏幕上显示计数,但我是上述错误。

在代码中,我声明了由useReducer钩子返回的count作为对象,我直接尝试返回它,而不是它的count属性

我应该返回count。我只返回count(对象本身)而不是property。

我们也可以stringify object并返回字符串。

import React, { useReducer } from "react";

const initialState = {
count:0,
}
const reducer = (state, action) => {
    switch (action.type) {
        case 'increment':
            return {count:state.count + 1}
        case 'decrement':
            return {count:state.count - 1}
        case 'reset':
            return initialState
        default:
            return state
    }
}

function CounterWithReducer(props) {
  const [count, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      <h1>{count}</h1>
      <button onClick={()=>{dispatch({type:'increment'})}}>Increment</button>

      <button onClick={()=>{dispatch({type:"decrement"})}}>Decrement</button>
      <button onClick={()=>{dispatch({type:"reset"})}}>Reset</button>
    </>
  );
}

export default CounterWithReducer;

在上面的代码中

{数}

这个部分(在返回部分)是我犯错误的地方,我需要使用count.count而不是count

总结是,如果你试图在屏幕上显示对象,你既不能使用JSON.stringify(),也不能尝试显示对象的任何属性。

我正处于开发生涯的早期阶段,如果有拼写错误,请原谅我。

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

错误代码:

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

Fix:

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