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

就我而言，我做到了

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

而不是

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

双花括号。

我有一个类似的错误，而我正在创建一个自定义模式。

const CustomModal = (visible, modalText, modalHeader) => {}

问题是我忘记了功能组件只能有一个道具传递给他们，根据REACT文档:

这个函数是一个有效的React组件，因为它只接受一个 “props”(代表属性)对象参数与数据和 返回一个React元素。我们称这种组件为“功能组件” 因为它们是JavaScript函数。反应文档

Therefore when we want to pass several variables we need to wrap them into an object or an Array and pass the pointer to that array or object. And destructure it on the component side before invoking the component. Alternatively we can use curly braces to indicate that we are sending an object with identical property names and variables that contain the value of those properties, like in the example here. And then define the function also to destructure upon arrival of the properties contained in the object.

const CustomModal = ({visible, modalText, modalHeader}) => {}

如果你有多个值要传递给组件，你应该传递一个对象，在它的属性/变量周围用花括号括起来(假设它们有相同的名字)。

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

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

当我试图在接收道具的子组件上渲染对象时，我遇到了这个问题。

当我意识到我的代码试图呈现一个对象，而不是我试图呈现的对象键的值时，我修复了这个问题。

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

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