在同級組件中使用反應自定義鈎子 useLocalStorage 時重新渲染問題

Question

我想創建一個自定義掛鈎以在 localStorage 中存儲一些值，並可以從我的 React 應用程序中的任何組件訪問該值。 此外，我想讓 React App 自動重新渲染使用 localStorage 中的值的組件並顯示新值。

所以，我創建了一個自定義掛鈎：

  export function useLocalStorageState(key, defaultState) {
  const [state, setState] = useState(() => {
    const storedState = localStorage.getItem(key);
    if (storedState) {
      return JSON.parse(storedState);
    }
    return defaultState;
  });

  const setLocalStorageState = useCallback(
    (newState) => {
      const changed = state !== newState;
      if (!changed) {
        return;
      }
      setState(newState);
      if (newState === null) {
        localStorage.removeItem(key);
      } else {
        localStorage.setItem(key, JSON.stringify(newState));
      }
    },
    [state, key]
  );

  return [state, setLocalStorageState];
}

我有 React 組件 Header，其中有一個包含一些值的下拉列表 select：

const Header = () => {
  const [numFormat, setNumFormat] = useLocalStorageState('numFormat');

  const handleChange = (event) => {
    setNumFormat(event.target.value);
  };

  return (
    <FormControl sx={{ m: 1, minWidth: 120 }} size="small">
      <Select
        value={numFormat || 'myFormat'}
        label="Num format"
        onChange={handleChange}
      >
        <MenuItem value="decimal">Decimal</MenuItem>
        <MenuItem value="fractional">Fraction</MenuItem>
        <MenuItem value="impliedProbability">Probability %</MenuItem>
      </Select>
    </FormControl>
  );
};

還有另一個 React 組件，我想在每次更改 Header 中的 numFormat 時重新渲染它：

const FormSettings = () => {
  const [numFormat] = useLocalStorageState('numFormat');
  useEffect(() => {
    console.log(numFormat);
  }, [numFormat]);

  return (
    <h1>{numFormat}</h1>
)}

但有一個問題。 當我更改 Header 中的 numFormat 時，FormSettings 中沒有任何變化。

Answer 1

我認為這是因為，自定義掛鈎實例在兩個組件中是不同的。 您在兩個組件中都調用了自定義掛鈎，並且兩個掛鈎都有自己的 state。當您在第一個掛鈎中更改 state 時，它不會影響第二個掛鈎。

您必須通過道具將numFormat從Header組件傳遞到FormSettings組件，並使用該值而不是實例化新的掛鈎。

如果您無法將numFormat從Header傳遞到FormSettings ，請將 state 提升為兩者的共同父級或嘗試使用React 上下文