对象作为反应组件无效。 （找到：带有键 的对象）。如果您打算渲染一组孩子，请改用数组

Posted 2023-02-16

【中文标题】对象作为反应组件无效。 （找到：带有键 的对象）。如果您打算渲染一组孩子，请改用数组

【英文标题】：Objects are not valid as a react component. (found: object with keys ). If you meant to render a collection of children, use an array instead对象作为反应组件无效。 （找到：带有键 的对象）。如果您打算渲染一组孩子，请改用数组

【发布时间】：2021-12-12 16:01:18

【问题描述】：

有多个标题相同的问题，但由于某种原因，我的情况很简单，但我无法解决。

我有一个提供此响应的 API：

   "customer":
      "default_address":
         "address1":null,
         "city":null,
         "country":null,
         "first_name":"Chaudhry",
         "user_id":1234,
         "last_name":"Talha",
         "name":"Chaudhry Talha",
         "phone":"12345667",
         "province":null,
         "zip":"12345"
      
   

我存储的状态：

...
    const [customerInfo, setCustomerInfo] = useState();
...
    setCustomerInfo(response.customer.default_address)
...

我收到此错误：

对象作为反应组件无效。 （找到：带钥匙的对象 ）。如果您打算渲染一组孩子，请使用数组 而是。

基于解决方案，我将useState 更改为：

const [customerInfo, setCustomerInfo] = useState([]);

错误：对象作为 React 子对象无效（找到：带键的对象 user_id, first_name, last_name, address1, 城市, 省, 国家, 邮编，电话，姓名，国家，默认）。如果你打算渲染一个 孩子的集合，请改用数组。

它也给了我这个错误：

警告：无法对未安装的组件执行 React 状态更新。 这是一个空操作，但它表明您的应用程序中存在内存泄漏。 要修复，请取消 useEffect 中的所有订阅和异步任务 清理功能。

对于上面的错误，我基本上是在我的代码中这样做的：

    useEffect(() => 
          myservice.getUserProfile("USER_ID").then((response) => 
          setCustomerInfo(response.customer.default_address)
...
, [])

我也试过把它设为空：

const [customerInfo, setCustomerInfo] = useState(null);

但得到了相同的错误，即 对象作为 React 子对象无效（找到：带键的对象...

那么，我该如何解析呢？

【问题讨论】：

你对组件 JSX 部分中的给定数据做了什么？

@LukaDumančić 我不确定我理解你的意思。您能否详细说明一下，我对整个 react-native 开发人员有点陌生？

渲染时出现此错误。你能包括你呈现customerInfo的jsx吗

【参考方案1】：

我假设您正在尝试映射“shippingAddress”？

保持

const [customerInfo, setCustomerInfo] = useState([]);

然后

shippingAddress.map((value, index) => 
    return(
    <p key=index>value.name</p> //use this to adjust what you want to display
    )

)

【参考方案2】：

我刚刚在我的本地空间尝试了你的代码，

我真的看不出你的代码有问题，我只是将你声明的类型更改为 null，这样他们就可以获取你提供给他们的任何类型的数据，所以试试这个：

  const [customerInfo, setCustomerInfo] = useState(null);
  const [shippingAddress, setShippingAddress] = useState(null);

【讨论】：

将其设为 null 也没有用。我已经用更多信息更新了我的问题，请检查一下这是否有助于进一步解决问题。