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

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

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

        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>
        )} 
      />

我还捕捉到了另一个场景。要渲染的DOM依赖于一些检查。我用null初始化它，Switch给它赋值。在返回时，返回那个DOM。

export function test() {
  let DOM = null;
  switch (conditions) {
    case 1: {
      DOM = <div>SOME DIV</div>;
    }
    case 2: {
      DOM = <div>SOME DIV2</div>;
    }
    default: {
      DOM = null;
    }
  }
  return { DOM }; // -----1 Problem was here
}

它的分辨率是用<></>来包装它

return <>{DOM}</>

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

例如

let x=5;

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

正确的做法是

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

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

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

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

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

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

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

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

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

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

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