一种实现这一点而又不会改变你当前结构的方法是，首先把你的按钮改成这样：

<button
  onClick={() => {
    localStorage.setItem("language", "english");
    window.dispatchEvent(new Event("storage"));
  }}
>
  English
</button>
<button
  onClick={() => {
    localStorage.setItem("language", "french");
    window.dispatchEvent(new Event("storage"));
  }}
>
  French
</button>

然后在setLangua和langu所在的组件内设置useEffect，useEffect将侦听localStorage中的更改并更新状态：

useEffect(() => {
  const listenStorageChange = () => {
    if (localStorage.getItem("language") === null) {
      setLangua("english");
    } else {
      setLangua(localStorage.getItem("language"));
    }
  };
  window.addEventListener("storage", listenStorageChange);
  return () => window.removeEventListener("storage", listenStorageChange);
}, []);

你需要在useEffect hook中设置它，如果依赖项为空，它将只在组件挂载时运行。

const [langu,setLangua] = useState(language)
useEffect(() => {
let language = ""
if (typeof window !== 'undefined') {
    if ( localStorage.getItem("language")  === null) {
        language = "english"
    }

    if ( localStorage.getItem("language")  !== null) {
        language = localStorage.getItem("language")
    }
}
setLanguage(language)
}, [])

您可以在将语言放入本地存储的同时设置语言，或者您可以使用useEffect钩子来设置subscribe to local storage changes。

import { useCallback, useEffect, useState } from 'react'

    const [userLang, setUserLang] = useState('english')

    const getLangFromLocalStorage = useCallback(() => {
        return localStorage.getItem('userLang');
    }, []);

    useEffect(() => {
      function checkUserLang() {
        const value = getLangFromLocalStorage()
    
        // Do with value what you want
    
        if (value) {
          setUserLang(value)
        }
      }
    
      window.addEventListener('storage', checkUserLang)
    
      return () => {
        window.removeEventListener('storage', checkUserLang)
      }
    }, [])

    // Set userLang initially when component did mount

    useEffect(() => {
        const value = getLangFromLocalStorage();
        if (value) {
            setUserLang(value);
        }
    }, []);

Note: This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can't access the same storage objects.