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

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

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

我的数据:

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>);

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

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

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

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

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

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

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

而不是

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

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