为什么xState不使用redux？

Question

当用户单击时，我试图更改按钮的状态，这都是xstate的一部分，按钮在那里得到，根据这个状态，该按钮将转到work.in类型记录，它运行良好，但没有反应钩子

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 | 

有什么东西我遗漏了吗，请纠正一下，我还需要什么

Answer 1

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

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

或在激活前检查

projectEntity && getButton(projectEntity.status)