反应 |尝试推送到状态数组时出现错误“对象作为 React 子项无效”答案

【问题标题】：React | error "Objects are not valid as a React child" when trying to push to state array反应 |尝试推送到状态数组时出现错误“对象作为 React 子项无效”
【发布时间】：2021-11-19 11:33:10
【问题描述】：

我正在通过我梦想的一个项目学习一些 React，该项目通过 props 和 pubsub 消息传递数据。我通过 pubsub 传递了一个电子邮件地址，它在 pubsub subscribe 方法上很好，如下所示：

myEmailChannel.subscribe("email", (msg) => {
            let data = msg.data;
            
            console.log(data);
                         
        });

上面的结果是控制台日志

value: 'test@test.com'

test@test.com 是我通过 pubsub 发送的虚假测试电子邮件。当我尝试将数据添加到已经初始化的“电子邮件”状态数组时，就会出现问题，我收到一些关于“对象作为 React 子对象无效（找到：带有键 {value} 的对象）的疯狂错误。如果您打算渲染一组子项，请改用数组。" 我正在尝试类似：

 myEmailChannel.subscribe("email", (msg) => {
            let data = msg.data;
            
            console.log(data);
            let emails = [...this.state.emails];
            emails.push({ value: data });
            this.setState({emails});
            
        });

只是为了得到上述错误。实际上，无论我如何尝试将数据添加到数组中，都会发生这种情况。我想我明白我只是为状态数组错误地格式化了传入数据？任何帮助将不胜感激。

编辑：我进一步关注了错误，它说当它尝试迭代数组以进行显示时发生错误：

{this.state.emails.map((email, index) => {
                return (

                    <li key={index}>{email}</li>

                );
            })}

【问题讨论】：

1) 那么emails 状态是如何使用的呢？ 2) data = {value: 'test@test.com'} 但你在做emails.push({ value: data }); 所以基本上你在做emails.push({ value: {value: 'test@test.com'}});
1) 我只是打算迭代数组以列出带有地图的项目。 2）啊，这可能是我的问题，我怀疑它可能是。会回复评论。
@MatthewKwong 刚刚添加了更多信息。显然，传递的数据与我迭代它以进行显示的方式存在问题。有什么想法吗？

标签： javascript reactjs

【解决方案1】：

正如你提到的，email 是一个对象。当你做这样的事情时

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

React 感到困惑。它不知道是否应该将 email 对象视为字符串（这正是您想要做的），还是将其呈现为组件。

您可以改为这样做。

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

【讨论】：

就是这样。我很确定我的映射错了，无法弄清楚到底在哪里。非常感谢，我可以停止拔头发了。