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