React/JavaScript，有人可以解釋為什么 setState 在 function 期間似乎沒有正確更新 state 嗎？

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 文件中有這段代碼，它似乎沒有做我想做的事情。 它應該是一個過濾 function 過濾與我指定的參數相同的項目。 我對 JS 很陌生，所以我認為這根本不是最有效的做事方式，但我認為它應該可以工作。 The logic of the function is that it sets the projectList state to the projectList which only contains the specified title, then it sets that new state to a state which only contains the specified language and so on... But it seems to only work for我設置的最后一個參數。 因此，如果我填寫經驗參數，它將忽略所有沒有指定經驗的項目。 我設置的標題、語言或長度無關緊要。 我認為這與 setState 的工作方式有關，但我不確定。 有人可以向我解釋如何解決這個問題嗎？ 謝謝！

Answer 1

從您的代碼中，我假設您將 searchProject 稱為事件處理程序。 當您這樣做時，function 內的 state 更新將被批處理。

現在，由於您的代碼中有多個 if 條件，因此您可以有多個 state 狀態塊可以一起發生。 並且由於它們都使用this.state進行過濾，因此對 this.setState 的最后一次調用是對結果進行批處理后反應將使用的內容

這里的解決方案是調用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 ，過濾它，然后設置 state：

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”方法以及單個 go 有多少參數？

從給定的代碼片段看起來可以同時使用多個參數調用此方法，其中更新 -'projectList' 是每個 if 塊。 因此，最好在將 state 更新為單個 go 之前執行所有條件檢查。 在所有條件檢查之前使用用 let 定義的單個“項目”變量。

一個小觀察：給定的代碼片段有箭頭 function 語法用於過濾方法，請將“searchProject”也更新為相同的語法。