Question

这是我的状态

this.state = {
    notification: [{
            from: {
                id: someid,
                name: somename
            },
            message: [somemessage]
        },
        {..},
        {..},
    ]
}

现在，如果我从 someid 收到新消息，则必须将该新消息推送到 someid

的 message 数组中

我试图以不同方式推送该消息，但没有任何效果

我以这种方式尝试过，但是我无法将新消息推送到 message 数组

if (this.state.notification) {
    for (let q = 0; q < this.state.notification.length; q++) {
        if (
            this.state.notification[q] &&
            this.state.notification[q].from &&
            this.state.notification[q].from.id === r.from.id
        ) {
            this.setState({
                notification: [
                    ...this.state.notification[q].messages,
                    this.state.notification[q].messages.push(r.message),
                ],
            });
            return console.log(this.state.notification[q].messages)
        }
    }
} else {
    this.setState({
        notification: [{
            from: r.from,
            messages: [r.message]
        }, ]
    });
    return console.log(JSON.stringify(this.state.notification));
}

Answer 1

首先，我认为将状态构造为2d数组不是一个好主意。但是你可以试试这个

const pushMessage = (someId, someMessage) => {
  this.setState({
    notifications: this.state.notifications.map((notification) => {
      if (notification.from.id === someId) {
        return {
          ...notification,
          messages: [...notification.messages, someMessage],
        };
      }
      return notification;
    }),
  });
};

Answer 2

我很确定您不能这样做：// Change to clone React.cloneElement(component, props) // **OR** make a wrapper <PrivateRoute exact path="/" component={() => <Home />} />。您不能直接更改状态。您应该使用状态的副本，使用看起来还可以的代码对其进行修改，然后执行this.state.notification[q].messages.push(r.message)。

Here is a repro on Stackblitz有效。这是代码：

setState(...)

我只处理现有通知中的消息推送，您已经遇到了另一种情况。

Answer 3

setState的第一个参数是一个更新程序函数，该函数将先前的状态作为参数。我认为您应该使用这一事实来正确更新状态。

查看此答案https://medium.com/@baphemot/understanding-reactjs-setstate-a4640451865b。

如何设置状态嵌套在对象数组中的数组

3 个答案: