UseReducer状态不会立即更新

问题描述

我正在尝试同步检索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,state[child.value],false);
      });
    }
    if (percolateUpward && _node.isChild) {
      toggleParentStatus(key,state[_node.parent.value]);
    }
  };

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

    if (_node.isChild) {
      toggleParentStatus(key,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}
    />
  );
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）