UseReducer状态不会立即更新

Question

我正在尝试同步检索reducer的状态。

useEffect将在执行toggleChecked，toggleChecked，isEveryChildChecked之后被调用。

一旦在toggleChecked中调用了该调度，它就会触发useEffect，然后在toggleParentStatus和isEveryChildChecked中更新状态。

export const FilterCheckBox = (props) => {
  const { node } = props;
  const { dispatch, state } = useFilterNodeContext()
  
  useEffect(() => {
    console.log(state);
  }, [state]);
  
  const toggleChecked = (key, eventValue, _node, percolateUpward = true) => {
    dispatch({ fieldName: _node.value, key, payload: eventValue });
    console.log('List ', state[_node.value])
    
    if (_node.isParent) {
      state[_node.value].children.forEach((child) => {
        toggleChecked(key, eventValue, state[child.value], false);
      });
    }
    if (percolateUpward && _node.isChild) {
      toggleParentStatus(key, eventValue, state[_node.parent.value]);
    }
  };

  const toggleParentStatus = (key, eventValue, _node) => {
    const evtValue = isEveryChildChecked(_node, eventValue) ? eventValue : 2;
    dispatch({ fieldName: _node.value, key, payload: evtValue });

    if (_node.isChild) {
      toggleParentStatus(key, eventValue, state[_node.parent.value]);
    }
  };

  const isEveryChildChecked = (_node, eventValue) => {
    _node.children.forEach((child) => {
      console.log(child.value + ' : ' + state[child.value].checked);
    });
    return _node.children.every(
      (child) => state[child.value].checked === eventValue
    );
  };

  return (
    <Checkbox
      disableRipple
      //className={`filterCheckBox checkBox_${node.value}`}
      value={node.value}
      onChange={(event) =>
        toggleChecked('checked', event.target.checked ? 1 : 0, node)
      }
      color="primary"
      checked={node.checked === 1 ? true : false}
      indeterminate={node.checked === 2 ? true : false}
    />
  );
};