javascript - 使用 foreach 循环的 SetState 不起作用

Question

我正在尝试使用以下代码更新状态:

handleCheckBox = () => {
    this.setState(({isCheckd}) => ({isCheckd: !isCheckd, isEnable: !isCheckd}), () => 
      this.props.untracked.forEach((item) => this.setState({ [item.resumeId]: this.state.isCheckd })),
      this.props.tracked.forEach((item) => this.setState({ [item.resumeId]: this.state.isCheckd }))
    );
  }

当我尝试使用 forEach 函数进行更新时。在第一个循环中，当您看到条件相同时，状态会更新。但在这第一个得到改变，但第二个没有得到改变。如果我改变它们的写入顺序，那么第一个的状态就会改变，但第二个不会改变。

handleTableCheckboxChange = (e, type) => {
    this.setState({
      [e.target.name]: e.target.checked
    }, () => {
      const checkedItems = this.props[type].filter((item) => this.state[item.resumeId])
      this.setState({
        isCheckd: checkedItems.length === this.props[type].length ? true : false,
        isEnable: checkedItems.length > 1 ? true : false
      });
    });
  }

如何防止这种情况发生？

Answer 1

正如我在对您上一个问题的评论中所说，您正在破坏 fundamental rules of React 之一:如果您基于现有状态设置状态，则必须使用setState的回调版本，而不是传递对象的版本.

看看该代码，这样做看起来像这样:

handleCheckBox = () => {
  this.setState(
    ({isCheckd}) => ({isCheckd: !isCheckd, isEnable: !isCheckd}),
    () => this.setState(({isCheckd}) => {
      const newState = {};
      for (const item of [...this.props.untracked, ...this.props.tracked]) {
        newState[item.resumeId] = isCheckd;
      }
      return newState;
    })
  );
}

但是，出现了一些奇怪的事情:

1. 目前尚不清楚为什么要在外部 setState 的完成处理程序中再次调用 setState。

2. 当您对它们做同样的事情时，不清楚为什么您会被跟踪和未跟踪。

如果您可以在一个状态更新中执行此操作，那可能会更好:

handleCheckBox = () => {
  this.setState(({isCheckd}) => {
    const newState = {
      isCheckd: !isCheckd,
      isEnable: !isCheckd
    };
    for (const item of [...this.props.untracked, ...this.props.tracked]) {
      newState[item.resumeId] = isCheckd;
    }
    return newState;
  });
}

<小时/>

关于您更新的问题，handleTableCheckboxChange 具有相同的问题(根据将对象传递给 setState 的现有状态设置状态)，因此具有相同的解决方案(使用回调版本)适用:

handleTableCheckboxChange = ({target: {name, checked}}, type) => {
  this.setState(prevState => {
    const newState = {[name]: checked};
    const checkedItems = this.props[type].filter((item) => prevState[item.resumeId]);
    newState.isCheckd = checkedItems.length === this.props[type].length;
    newState.isEnable = checkedItems.length > 1;
    return newState;
  });
};

(请注意，我已从设置 isCheckd 和 isEnable 的行中删除了 ? true : false。=== 和 > 已经 给你一个 bool 值，在那里添加条件运算符是没有意义的。)