React中如何向state内的数组添加新值并在alert窗口显示整个数组

原有代码问题 #

• 直接调用this.state.omens.push()属于直接修改原state的错误写法，违反React状态不可变的规范，无法触发组件重新渲染
• push方法返回值是数组更新后的长度，不是更新后的数组本身，因此你打印test只能拿到长度值，拿不到完整数组内容

正确实现代码 #

只需要修改handleAddOmen方法即可，代码如下：

handleAddOmen = () => {
  // 基于原数组生成新数组，不直接修改原state
  const updatedOmens = [...this.state.omens, this.state.newOmen];
  this.setState({
    omens: updatedOmens,
    newOmen: "" // 可选配置，添加完成后清空输入框
  }, () => {
    // setState是异步操作，回调函数会在state更新完成后触发，此时能拿到最新的数组
    alert(this.state.omens.join("、"));
  })
}

逻辑说明 #

• 用扩展运算符...拷贝原omens数组，拼接上新输入的newOmen生成全新数组，符合React不可变更新的要求
• setState的第二个参数是更新完成的回调函数，在这里调用alert可以确保拿到的是添加完成后的完整数组
• 用join方法可以将数组转为用指定符号分隔的字符串，更适合弹窗展示

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