React Context - 设置状态然后直接引用它？

Question

我正在处理一个项目列表，我想设置一个选定的项目 id，然后使用该 id 获取选定的项目。

我正在使用有效的减速器更新上下文的状态，但是在引用状态的属性时，它看不到更新的值。

组件.js

  useEffect(() => {
    setSelectedId(5);
    getSelectedItem();
  }, []);

上下文.js

  const initialState = {
    selectedId: 0,
  };

  const [state, dispatch] = useReducer(ItemReducer, initialState);

  const setSelectedId = id => dispatch({ type: SET_SELECTED_ID, payload: id });

  // HERE IT THINKS 'state.selectedId' IS 0
  const getSelectedItem = async () => {
     const selectedItem = await fetch(url + state.selectedId);
  };

Chrome 开发工具显示 selected id 属性已更新为 5，但 getSelectedItem 函数将“selectedId”视为 0 而不是 5。

这可能是一个简单的问题，任何帮助将不胜感激。

谢谢

Answer 1

您将需要解决将返回的承诺。 就像是：

useEffect(() => {
    setSelected(5).then(getSelectedItem());

  }, []);

Answer 2

你可以移动getSelectedItem(); 进入它自己的依赖于 selectedItemId 的 useEffect，这样它只会在设置 selectedId 的值后执行 getSelectedItem。

useEffect(() => { 
   if(selectedId) getSelectedItem();
}, [selectedId]);