React组件数组类型state新增元素后立即被删除的问题如何解决？

问题根因及解决方法 #

你遇到的新增元素立即消失的问题，90%以上的场景是表单默认提交行为触发页面刷新，导致state重置为初始值，可按以下步骤逐一排查修复：

• 检查AddServer按钮是否放在<form>标签内
  若是，需要在提交事件回调中阻止默认行为，示例如下：

  // 如果你是用form的onSubmit触发新增
  handleFormSubmit = (e) => {
    e.preventDefault()
    // 调用HandleAddServer传入表单参数
    this.HandleAddServer(serverNameInput, serverIpInput, serverTypeInput)
  }
  // 如果直接给按钮绑定点击事件，也可以在点击回调里加e.preventDefault()
  

• 修复this绑定的冗余错误
  你在代码中对HandleAddServer同时使用了类属性箭头函数和constructor手动bind两种this绑定方式，属于冗余操作，可能引发this指向异常，直接删除constructor中以下代码即可：

  this.HandleAddServer = this.HandleAddServer.bind(this);
  

• 增加边界逻辑避免报错
  当前代码在服务器列表初始为空的场景下，取serverslist[serverslist.length -1].id会抛出未定义错误，可修改newid的计算逻辑：

  const newid = serverslist.length ? serverslist[serverslist.length -1].id + 1 : 1
  

• 排查其他state覆盖逻辑
  检查是否有其他生命周期方法（如componentDidUpdate）、接口请求回调中对state.servers做了赋值操作，导致新增后本地state被远程数据覆盖。

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