React.js-如何在另一個函數完成后調用setState函數

Question

我一定在這里想念一些明顯的東西。 我有一個待辦事項列表應用程序，它使用功能來創建新列表。 調用createList ，我想通過將其selected prop設置為true來突出顯示列表。以下是執行此操作的兩種方法。 我想一個接一個地打電話。 他們都使用的是使用適當的回調修改狀態prevState ，但無論出於何種原因createList不會設置狀態下的新列表之前toggleSelected被調用，所以listName是未定義toggleSelected 。 無論如何，要確保在調用toggleSelected之前將新列表對象設置為狀態？ 我可能應該使用Redux，但我不想在我的第一個React應用程序中使用它。

createList = (listName) => {
  const lists = {...this.state.lists};
  lists[listName] = {
    listName: listName,
    selected: false,
    todos: {}
  };

  this.setState(prevState => {
    return {lists: prevState.lists};
  });
};

toggleSelected = (listName) => {
    let selected = this.state.lists[listName].selected;
    selected = !selected;
    this.setState(prevState => {
      return {
        bookLists: update(prevState.lists, {[listName]: {selected: {$set: selected}}})
      };
    });
};

這兩個方法都在另一個組件中調用，就像在onSubmit處理函數之后那樣，傳入新的列表名稱：

this.props.createList(newListName);
this.props.toggleSelected(newListName);

PS-如果您想知道update()是怎么一回事，它來自一個不變性幫助程序插件，該插件可以輕松地在狀態對象中設置嵌套值（在這種情況下，為state.lists[listName].selected ）–另一個原因我可能應該和Redux一起去。

creatList我意識到我可以從creatList開始creatList新列表的selected屬性設置為true ，但是該應用還有更多功能，因此我需要在創建后進行設置。

Answer 1

不要立即在toggleSelected ，而是切換列表中的selected標志（不提取它），然后讓您的組件知道您通過重新綁定結果對象來更新lists數據：

class YourComponent {
  ...
  toggleSelected(listName) {
    let lists = this.state.lists;
    let list = lists[listName];
    list.selected = !list.selected;
    this.setState({ lists });
  }
  ..
}

然后確保在渲染函數（為每個列表創建UI）中，檢查selected是true還是false，以便可以設置適當的classNames字符串。

（還要注意，在您的代碼中，您使用了selected = !selected 。這不會做太多事情，因為您提取了一個布爾值，將其翻轉，然后又沒有將其保存回可以供其他人查詢的位置。碼）

Answer 2

問題不在第二個setState函數中。 它在toggleSelected（）方法的第一行。

當執行toggleSelected（）方法時，尚未執行第一個setState。

您的代碼流為：

1. createList（）;
2. toggleSelected（）;
3. setState（）在createList（）中；
4. toggleSelected（）中的setState（）;

解決方案1：使用await和async關鍵字

解決方案2：使用Redux