时间戳

首页 > 解决方案 > React 数组推送方法

javascript - React 数组推送方法

问题描述

我在 React 中有一个聊天应用程序，当我单击复选框时，我在文本旁边有一个复选框，我接收短信。我只想将文本存储在数组中。当我存储文本时，我使用以下代码：

this.setState(() =>{
     this.state.allMessage.push(message.content.text);
});

但是我只能存储一个，假设我单击复选框并发送到数组“Hello world”。然后我点击复选框“Hello Guys”，只有这个被存储到数组中。我只想这样添加：

allMessage: ["Hello World" , "Hello Guys"]
怎么可以这样添加。
现在，当我按下“Hello Guys”时，“Hello world”会自动删除。

标签： javascriptarraysreactjs

解决方案

不要改变状态：

this.setState({
   allMessages: [
     ...this.state.allMessages, 
     message.content.text
   ]
})

这可能无法解决您的确切问题，但这是第一步。

那样怎么能加成这样。当我按“Hello Guys”“Hello world”自动删除时。

如果您一次只想保持一个项目处于状态，您是否想要一个数组？

你可以这样做：

onToggleMessageCheckbox(e) {
  this.setState({
   allMessages: e.target.checked ? [e.target.value] : []
  });
}

如果您确实想保持两个复选框的状态：

onToggleMessageCheckbox(e) {
  this.setState(state => ({
   ...state, 
   allMessages: e.target.checked ? state.allMessages.concat(e.target.value) : state.allMessages.filter(m => m !== e.target.value)
  });
}

推荐阅读