Javascript React.js-如何在另一个setState函数完成后调用它

我一定错过了一些明显的东西。我有一个待办事项列表应用程序，它使用一个创建新列表的功能。调用

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.listName.selected

）——这可能是我应该选择Redux的另一个原因

---

PPS-我意识到我可以在

creatList

中从一开始就将新列表的

selected

属性设置为

true

，但应用程序还有更多内容，我需要在创建后进行设置。

现在不要做你在

切换selected

中正在做的事情，而是切换列表中的

selected

标志（不提取），然后通过重新绑定结果对象，让组件知道您已更新了

列表

数据：

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

然后确保在为每个列表创建UI的渲染函数中，检查所选的

是否为true或false，以便设置适当的
类名
字符串

（还要注意，在您的代码中，您使用了
selected=！selected
。这没有多大作用，因为您提取了一个布尔值，将其翻转，然后没有将其保存回其他代码可以查阅的位置）
问题不在第二个setState函数中。它位于toggleSelected（）方法的第一行

执行toggleSelected（）方法时，第一个setState尚未执行

代码的流程是：

createList（）
切换选定项（）
createList（）中的setState（）
toggleSelected（）中的setState（）
解决方案1：
使用等待和异步关键字

解决方案2：
使用redux
感谢您的回复！快速提问：您所说的
切换选定的
是什么意思？据我所见，它只是用翻转的
选定的
更新状态（此方法在应用程序的其他部分中已按预期工作）。我可能误读了您的setState所做的操作，您没有向它传递状态和回调，而只是传递一个函数（这可能是调用setState的一种新方式，到目前为止，我使用的所有代码都是
this.setState（stateobj，callbackwhenupdated）
）.Ah，不是。
setState
的第一个参数可以是具有以下签名的更新程序函数
（prevState，props）=>stateChange
。据我所知，这是更新状态的正确方法：因为setState是asnyc，
prevState
将在任何其他方法更改状态后返回状态。这是为代码调用状态的正确方法，否则会出现问题（就像计数器天真地依赖于此.state中的值）。此代码不受此影响（由于对列表名进行了显式编辑），因此我们可以使用“只传递新状态”更新。