Question

我有一个具有两个setState的函数，第二个必须依赖第一个，如何更新代码以实现该功能？

  makeHandleChange = name => contactID => {
    this.setState(prevState => ({
      contactInfo: prevState.contactInfo.filter(i => i.id !== contactID ),
    }));
    const searchMode =
      this.state.contactInfo.length === 0
        ? searchModes.noResultsPanel
        : searchModes.resultsPanel;
    this.setState({ searchMode });
  };

Answer 1

您可以在一个setState中完成

makeHandleChange = name => contactID => {

    let filteredContactInfo = this.state.contactInfo.filter(i => i.id !== contactID )
    this.setState({
       contactInfo: filteredContactInfo,
       searchMode: !filteredContactInfo.length ? searchModes.noResultsPanel: searchModes.resultsPanel
    });
  };

Answer 2

setState都需要使用状态更新程序函数将它们排入队列并避免出现竞争状况：

this.setState(prevState => ({
  contactInfo: prevState.contactInfo.filter(i => i.id !== contactID )
}));

this.setState(prevState => ({
  searchMode: prevState.contactInfo.length === 0
    ? prevState.searchModes.noResultsPanel
    : prevState.searchModes.resultsPanel
});

通过这种方式，可以将更新程序功能提取为可重用功能。

两个setState通话可以合并为一个通话（如另一个答案已显示），但这是不必要的：

this.setState(prevState => {
  const contactInfo = prevState.contactInfo.filter(i => i.id !== contactID );

  return {
    contactInfo,
    searchMode: contactInfo.length === 0
      ? prevState.searchModes.noResultsPanel
      : prevState.searchModes.resultsPanel
});

Answer 3

您可以使用第一个setState的回调：

makeHandleChange = name => contactID => {
  this.setState(prevState => ({
    contactInfo: prevState.contactInfo.filter(i => i.id !== contactID)
  }), () => {
    this.setState({ searchMode: this.state.contactInfo.length === 0
      ? searchModes.noResultsPanel
      : searchModes.resultsPanel;
    });
  });
};

两个setState第二个首先依赖

3 个答案: