React向state数组存数据时报“Objects are not valid as a React child”错误求助

错误根因 #

React 不支持直接将普通 JavaScript 对象作为子元素渲染到DOM中，你遇到的报错是因为渲染阶段直接将emails数组内的对象放在了JSX的{}语法中，同时数据存储阶段存在多余的对象嵌套问题，具体如下：

1. 数据存储逻辑冗余：你打印的msg.data本身已经是结构为{value: 'test@test.com'}的对象，原有代码在存入时又额外包了一层{value: data}，导致最终数组元素结构变为{value: {value: 'test@test.com'}}，不符合预期。
2. 渲染逻辑未取实际值：遍历数组时直接渲染email对象，没有取出其中的邮箱字符串值。

解决方案 #

方案1：存储对象结构，渲染时取字段 #

第一步：修正订阅回调的存储逻辑

建议使用函数式setState避免异步状态更新引发的状态异常：

myEmailChannel.subscribe("email", (msg) => {
  const emailValue = msg.data.value;
  this.setState(prevState => ({
    emails: [...prevState.emails, { value: emailValue }]
  }));
});

第二步：修正渲染逻辑，取出对象的value字段渲染

{this.state.emails.map((email, index) => {
  return (
    <li key={index}>{email.value}</li>
  );
})}

方案2：直接存储邮箱字符串，简化渲染逻辑 #

如果emails数组不需要额外存储其他字段，可以直接存字符串，无需套对象结构：

存储逻辑

myEmailChannel.subscribe("email", (msg) => {
  const emailValue = msg.data.value;
  this.setState(prevState => ({
    emails: [...prevState.emails, emailValue]
  }));
});

渲染逻辑可以保持原有写法，直接渲染字符串即可

{this.state.emails.map((email, index) => {
  return (
    <li key={index}>{email}</li>
  );
})}

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