时间戳

首页 > 解决方案 > 为什么 xState 不能与 react redux 一起使用？

javascript - 为什么 xState 不能与 react redux 一起使用？

问题描述

我试图在用户单击时更改按钮的状态，它都是 xstate 的一部分，按钮正在获取，根据状态按钮将要工作。在打字稿中，它工作正常，但在反应钩子中没有

const ProjectStatus = {
  UN_ASSIGNED: 'UN_ASSIGNED',
  ASSIGNED: 'ASSIGNED',
  CHECKED_OUT: 'CHECKED_OUT',
  CHECKED_IN: 'CHECKED_IN',
  QC_START: 'QC_START',
  QC_FAIL: 'QC_FAIL',
  QC_PASS: 'QC_PASS',
  CUSTOMER_REVIEW: 'CUSTOMER_REVIEW',
  CUSTOMER_REJECT: 'CUSTOMER_REJECT',
  RE_ASSIGN: 'RE_ASSIGN',
  HOLD: 'HOLD',
  DONE: 'DONE',
  CUSTOMER_APPROVE: 'CUSTOMER_APPROVE'
};
function MachineButton() {
  const classes = useStyles();
  const dispatch = useDispatch();
  const params = useParams();
  const [anchorEl, setAnchorEl] = useState(false);
  const [current, send] = useState({ ...ProjectStatus });


  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  const projectEntity = useSelector((states) => (states.taskDetails.entity));

  useEffect(() => {
    dispatch(getTaskById(params.id));
  }, []);
  const toggleMachine = (currentState, action) => {
    const nextState = machine.transition(currentState, action);
    if (currentState !== nextState.value) {
      send(ProjectStatus[nextState.value]);
      dispatch(updateTask({ ...projectEntity }));
    }
  };

  const getButton = (currentState) => {
    if (currentState !== undefined) {
      const nextStates = machine.states[currentState].on;
      if (Object.keys(nextStates).length !== 0) {
        return (
          <div>
            <Button
              color="primary"
              variant="contained"
              aria-controls="simple-menu"
              aria-haspopup="true"
              onClick={handleClick}
            >
              {Object.keys(nextStates)[0]}
            </Button>
            <Menu
              id="lock-menu"
              anchorEl={anchorEl}
              keepMounted
              getContentAnchorEl={null}
              open={Boolean(anchorEl)}
              onClose={handleClose}
              anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'center',
              }}
              transformOrigin={{
                vertical: 'top',
                horizontal: 'center',
              }}
            >
              {Object.keys(nextStates).map((action, index) => (
                <MenuItem
                  key={action}
                  selected={index === currentState}
                  onClick={() => toggleMachine(currentState, action)}
                >
                  {action}
                </MenuItem>
              ))}
            </Menu>

          </div>


        );
      }
    }
  };
  return (
    <div className={classes.actions}>
      {getButton(projectEntity.status)}
    </div>


  );
}


export default MachineButton;

我得到的状态是未定义的，但是当我重新加载按钮时，值正在更新

这是我得到的错误。

 TypeError: Cannot read property 'status' of undefined
 181 | 
  182 | 
  183 | return (
> 184 |   <div className={classes.actions}>
      | ^  185 |     {getButton(projectEntity.status)}
  186 |   </div>
  187 |

有什么我遗漏的，请纠正，我还需要什么

标签： javascriptreactjsreact-hooksxstate

解决方案

这可能会发生，因为当代码到达时getButton(projectEntity.status)，projectEntity useSelector结果仍然没有计算，因此它仍然是未定义的。只需在|| {}您的装饰中添加一个即可避免它

const projectEntity = useSelector((states) => (states.taskDetails.entity)) || {}

或激活前检查

projectEntity && getButton(projectEntity.status)

推荐阅读