React存储API返回数据到state后报Objects are not valid as a React child错误如何解决

问题1：Objects are not valid as a React child 报错 #

原因 #

该报错和state的初始值类型无关，是你在JSX代码中直接把customerInfo对象当成了文本内容渲染，React不支持直接渲染对象类型的子元素。

解决方法 #

1. state初始值可保持默认对象即可：

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

2. 渲染时不要直接写{customerInfo}，需要读取对象内的具体属性值，使用可选链?.避免初始加载时属性不存在的报错：

// 正确渲染示例
<div>
  <p>用户姓名：{customerInfo?.name}</p>
  <p>联系电话：{customerInfo?.phone}</p>
  <p>邮政编码：{customerInfo?.zip}</p>
  <!-- 其他需要展示的字段依次读取对应属性即可 -->
</div>

问题2：组件卸载后更新state的内存泄漏警告 #

原因 #

你在useEffect中发起异步请求，请求返回前如果组件已经被卸载，此时执行setCustomerInfo就会触发该警告。

解决方法 #

在useEffect中添加挂载状态标记，组件卸载时更新标记，只有组件处于挂载状态时才更新state：

useEffect(() => {
  let isMounted = true;
  myservice.getUserProfile("USER_ID").then((response) => {
    if (isMounted) {
      setCustomerInfo(response.customer.default_address)
    }
  })
  // 清理函数，组件卸载时执行
  return () => {
    isMounted = false;
  }
}, [])

内容的提问来源于stack exchange，提问作者Chaudhry Talha