Question

我必须在这里遗漏一些明显的东西。我有一个待办事项列表应用程序，它使用一个函数来创建新列表。调用createList后，我想通过将selected道具设置为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()的内容是什么，它来自一个不变的帮助插件，允许在状态对象中轻松设置嵌套值（在此case，state.lists[listName].selected） - 我可能应该使用Redux的另一个原因。

PPS - 我意识到我可以从selected开始将新列表的true道具设置为creatList，但还有更多应用和我需要在创建后设置它。

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是真还是假，这样您就可以设置相应的classNames字符串。

（另请注意，在您的代码中，您使用了selected = !selected。这不会做太多，因为您提取一个布尔值，翻转它，然后没有＆＃39; t将其保存回其他代码可以查询的地方）

Answer 2

问题不在第二个setState函数中。它位于toggleSelected（）方法的第一行。

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

您的代码流程为：

createList（）;
toggleSelected（）;
createList（）;中的setState（）;
toggleSelected（）;中的setState（）;

解决方案1：使用等待和异步关键字

解决方案2：使用redux

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

2 个答案: