React测试应用添加项目后自动回退初始状态问题求助

嘿，你的问题根源很明确：表单提交触发了浏览器的默认刷新行为，导致整个App组件重新挂载，componentWillMount又把state重置成了初始的3个项目，所以新添加的项目刚显示就没了。下面是具体的修复方案：

1. 阻止表单默认提交行为 #

在AddProject.js的handleSubmit方法里，首先要阻止表单的默认提交动作，这样页面就不会刷新了：

handleSubmit(event){
  // 关键：阻止表单默认提交刷新页面
  event.preventDefault();
  
  this.setState({newProject:{
    title:this.refs.title.value,
    category:this.refs.category.value
  }}, function () {
    this.props.addProject(this.state.newProject)
  })
}

2. 正确更新state数组（遵循不可变原则） #

你在App.js的handleAddProject里直接用projects.push(project)修改原数组，这不符合React的状态更新规范——React依赖state的不可变性来检测变化。我们应该创建一个新数组来更新state：

handleAddProject(project){
  // 用扩展运算符生成新数组，不直接修改原state
  const projects = [...this.state.projects, project];
  this.setState({ projects });
  console.log(this.state.projects);
}

或者用concat方法也能达到同样效果：

const projects = this.state.projects.concat(project);

额外优化建议（可选） #

componentWillMount已经是React的过时生命周期方法了，推荐直接在constructor里初始化state，代码更简洁：

constructor(){
  super();
  this.state = {
    projects:[
      { title: "Trigger", category: "Web App" },
      { title: "Trigger", category: "Web App" },
      { title: "Trigger", category: "Web App" }
    ]
  }
}

这样就能删掉componentWillMount方法啦。

做完这两步修改，你添加新项目后就不会再出现消失的问题了，新的项目会一直保留在列表里~

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