为啥 xState 不能与 react redux 一起使用？

Posted 2023-02-19

【中文标题】为啥 xState 不能与 react redux 一起使用？

【英文标题】：Why xState is not working with react redux?为什么 xState 不能与 react redux 一起使用？

【发布时间】：2020-09-24 11:29:35

【问题描述】：

我正在尝试在用户单击时更改按钮的状态，这都是 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 | 

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

【参考方案1】：

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

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

或激活前检查器

projectEntity && getButton(projectEntity.status)