为什么 xState 不能与 react redux 一起使用?
Why xState is not working with react redux?
我正在尝试在用户单击时更改按钮的状态,它是 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 |
有什么遗漏的,请指正,还需要什么
它可能会发生,因为当代码将到达 getButton(projectEntity.status)
时,projectEntity
useSelector
结果仍然没有计算,因此它仍然是未定义的。只需在您的装饰中添加一个 || {}
即可避免它
const projectEntity = useSelector((states) => (states.taskDetails.entity)) || {}
或激活前检查器
projectEntity && getButton(projectEntity.status)
我正在尝试在用户单击时更改按钮的状态,它是 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 |
有什么遗漏的,请指正,还需要什么
它可能会发生,因为当代码将到达 getButton(projectEntity.status)
时,projectEntity
useSelector
结果仍然没有计算,因此它仍然是未定义的。只需在您的装饰中添加一个 || {}
即可避免它
const projectEntity = useSelector((states) => (states.taskDetails.entity)) || {}
或激活前检查器
projectEntity && getButton(projectEntity.status)