React store problem using easy peasy, unexpected rendering 搞乱店里的模型
React store problem using easy peasy, unexpcted rendering mess up the model in store
当我调用一个动作时,第一次数据加载得很好。
组件再次重新渲染并弄乱状态。
默认状态
menu_detail: {
error: null,
menu_id: 0,
detail: {}
}
工作状态
menu_detail: {
error: null,
menu_id: 2,
detail: {
menu: {
...
}
}
意外渲染后
menu_detail: { }
我的代码
const setMenuDetail = useStoreActions(actions => actions);
const getMenuDetail = useStoreActions(actions => actions.menu_detail.getMenuDetail);
const setMenuId = useStoreActions(actions => actions.menu_detail.setMenuId);
const menu_id = useStoreState(state => state.menu_detail.menu_id);
const menu = useStoreState(state => state.menu_detail.detail.menu);
// const menu_option_categories = useStoreState(state => state.menu_detail.menu_detail.menu_option_categories);
const { data } = props.location;
React.useEffect(() => {
setMenuId(parseInt(data));
getMenuDetail();
}, [menu]);
...
我将 React.useEffect() 更新为:
React.useEffect(() => {
setMenuId(parseInt(data));
getMenuDetail(2);
}, []);
现在可以了。
当我调用一个动作时,第一次数据加载得很好。 组件再次重新渲染并弄乱状态。
默认状态
menu_detail: {
error: null,
menu_id: 0,
detail: {}
}
工作状态
menu_detail: {
error: null,
menu_id: 2,
detail: {
menu: {
...
}
}
意外渲染后
menu_detail: { }
我的代码
const setMenuDetail = useStoreActions(actions => actions);
const getMenuDetail = useStoreActions(actions => actions.menu_detail.getMenuDetail);
const setMenuId = useStoreActions(actions => actions.menu_detail.setMenuId);
const menu_id = useStoreState(state => state.menu_detail.menu_id);
const menu = useStoreState(state => state.menu_detail.detail.menu);
// const menu_option_categories = useStoreState(state => state.menu_detail.menu_detail.menu_option_categories);
const { data } = props.location;
React.useEffect(() => {
setMenuId(parseInt(data));
getMenuDetail();
}, [menu]);
...
我将 React.useEffect() 更新为:
React.useEffect(() => {
setMenuId(parseInt(data));
getMenuDetail(2);
}, []);
现在可以了。