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

我做错了什么?


当前回答

在您的状态下,home被初始化为一个数组 家庭:[]

在返回中,尝试呈现home(这是一个数组)。 < p >东西:{家园}< / p >

不能这样做——如果你想渲染它,你需要渲染一个数组到每个单独的项目。例如:使用map()

Ex:{家(item = >)的项目文件夹。

其他回答

我使用faker.js我期待公司字段是字符串,但它是一个数组 它是:

<div className='text-gray-400 text-sm'>works at {s.company}</div>

而应该是

<div className='text-gray-400 text-sm'>works at {s.company.name}</div>

我认为这不是程序员的错,世界是一个意想不到的地方,它的数据可能是任何东西。React应该指出准确的错误。

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

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

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

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

如果你想在不迭代的情况下显示所有对象,那么你必须将数据作为字符串值发送 即

  <p>{variableName.toString()}</>

对象作为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(),也不能尝试显示对象的任何属性。

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

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

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