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

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() 是怎么回事，它来自一个不变性辅助插件，它允许在状态对象中轻松设置嵌套值(在本例中为 state.lists[listName].selected)——我可能应该选择 Redux 的另一个原因。

PPS - 我意识到我可以从 creatList 开始将新列表的 selected 属性设置为 true 但应用程序还有更多功能我需要在创建后设置它。

Answer 1

现在不要执行您在 toggleSelected 中执行的操作，而是切换列表中的 selected 标志(不提取它)，然后让您的组件知道您通过重新绑定(bind)结果对象更新了 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。这不会有太大作用，因为您提取了一个 bool 值，并将其翻转，然后没有保存回可以被其他代码查阅的地方)