Проблема с хранилищем React с использованием простого простого, непредусмотренного рендеринга портит модель в хранилище

#javascript #reactjs #redux #use-effect #easy-peasy

#javascript #reactjs #сокращение #использование-эффект #проще простого

Вопрос:

Когда я вызываю действие, данные в первый раз загружаются совершенно нормально. Компонент повторно визуализируется снова и портит состояние.

Состояние по умолчанию

 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]);
    ...
 

Ответ №1:

Я обновил React.useEffect() до :

 React.useEffect(() => {
        setMenuId(parseInt(data));
        getMenuDetail(2);
    }, []);
 

Теперь это работает.