Javascript 为什么xState不使用react redux？

我试图在用户单击时更改按钮的状态，这都是xstate的一部分，根据按钮将要工作的状态，按钮将在xstate中获得。在typescript中，它工作正常，但在react钩子中不工作

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;

const ProjectStatus={
未分配：“未分配”，
已分配：'已分配'，
签出：“签出”，
签入：“签入”，
QC_开始：“QC_开始”，
QC_失败：“QC_失败”，
QC_通行证：“QC_通行证”，
客户审查：“客户审查”，
客户拒绝：“客户拒绝”，
重新分配：“重新分配”，
保持：'保持'，
完成：'完成'，
客户批准：“客户批准”
};
函数MachineButton（）{
const classes=useStyles（）；
const dispatch=usedpatch（）；
const params=useparms（）；
const[anchorEl，setAnchorEl]=使用状态（false）；
const[current，send]=useState（{…ProjectStatus}）；
常量handleClick=（事件）=>{
Setancorel（事件当前目标）；
};
常量handleClose=（）=>{
setAnchorEl（空）；
};
const projectEntity=useSelector（（states）=>（states.taskDetails.entity））；
useffect（（）=>{
调度（getTaskById（params.id））；
}, []);
const-toggleMachine=（当前状态，操作）=>{
const nextState=machine.transition（当前状态，动作）；
if（currentState！==nextState.value）{
发送（ProjectStatus[nextState.value]）；
调度（updateTask（{…projectEntity}））；
}
};
常量getButton=（当前状态）=>{
如果（当前状态！==未定义）{
const nextStates=machine.states[currentState].on；
if（Object.keys（nextStates）.length！==0）{
返回(
{Object.keys（nextStates）[0]}
{Object.keys（nextStates）.map（（操作，索引）=>(
切换机器（当前状态、操作）}
>
{action}
))}
);
}
}
};
返回(
{getButton（projectEntity.status）}
);
}
导出默认机器按钮；

“我正在获取”状态未定义，但当我重新加载按钮时，值正在更新

这就是我得到的错误

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

TypeError:无法读取未定义的属性“status”
181 | 
182 | 
183 |返回(
> 184 |   
|^185{getButton（projectEntity.status）}
186 |   
187 | 

---

是否有我遗漏的东西，请纠正一下，我还需要什么呢？

可能会发生这种情况，因为当代码到达

getButton（projectEntity.status）

，

projectEntity

useSelector结果仍然没有计算，因此它仍然没有定义。只需添加一个

|{}

安装到您的装饰上以避免它

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

在激活前检查或检查

projectEntity && getButton(projectEntity.status)