ReactJavaScript，谁能解释一下为什么setState在函数过程中似乎不能正确更新状态？

Question

searchProject(title, language, length, experience) {
        if (title !== "") {
            const projects = this.state.projectList.filter(
                p => p.title === title 
            );
            this.setState({projectList : projects});
            }
        if (language !== "") {
            const projects = this.state.projectList.filter(
                p => p.language === language
            );
            this.setState({projectList : projects});
            }
        if (length !== 0) {
            const projects = this.state.projectList.filter(
                p => p.length === length 
            );
            this.setState({projectList : projects});
            }
        if (experience !== "") {
            const projects = this.state.projectList.filter(
                p => p.experience === experience
            );
            this.setState({projectList : projects});
            }
                        

        }

我的JS文件中有这样一段代码，但似乎没有做我想做的事情。它应该是一个过滤函数，它可以过滤具有与我指定的相同参数的项目。我对JS很陌生，所以我不认为这是最有效的方法，但我认为它应该可以工作。这个函数的逻辑是，它将projectList状态设置为只包含指定标题的projectList，然后将该新状态设置为只包含指定语言的状态，以此类推......。但似乎只对我设置的最后一个参数有效。所以，如果我填入经验参数，它会忽略所有没有指定经验的项目。不管我设置了什么标题、语言或长度，都没有关系。我想这与setState的工作方式有关，但我不确定。谁能给我解释一下如何解决这个问题？谢谢您

Answer 1

从你的代码中，我假设你调用searchProject作为一个事件处理程序。当你这样做时，函数内部的状态更新是分批进行的。

现在，由于你的代码中有多个if条件，你可以有多个状态块同时发生。this.state 来过滤，最后一次调用this.setState的结果将在批处理后被react使用。

这里的解决方案是调用 this.setState 曾经

searchProject(title, language, length, experience) {
  let projects = [...this.state.projectList];
  if (title !== "") {
      projects = projects.filter(
          p => p.title === title 
      );
  }
  if (language !== "") {
      projects = projects.filter(
          p => p.language === language
      );
  }
  if (length !== 0) {
      projects = projects.filter(
          p => p.length === length 
      );
  }
  if (experience !== "") {
      projects = projects.filter(
          p => p.experience === experience
      );
  }
  this.setState({ projectList: projects});

}

Answer 2

我将加载 projectList 一次，过滤，然后设置状态。

searchProject(title, language, length, experience) {
  let projects = this.state.projectList;

  if (title) { // Empty string is falsy, so this is the same as (title !== "")
    projects = projects.filter(...)
  }

  if (language) {
    projects  = projects.filter(...)
  }


  ...


  this.setState({projectList: projects});

}

Answer 3

有一个问题： 你什么时候调用 "searchProject "方法？ 一次调用多少个参数？

从给定的代码段来看，这个方法可以用多个参数同时调用，这将更新-'projectList'是每一个if块。所以，如果你在更新状态之前执行所有的条件检查会更好。在所有条件检查之前，使用一个用let定义的'projects'变量。

一个小观察。鉴于这段代码的过滤方法采用了箭头函数语法，请将'searchProject'也更新为相同的语法。