在ReactJS中，如何從一個單獨的檔案更新useState的值？

Question

我正在嘗試從兩個不同的檔案中存取和更新物件的狀態，如果我為每個檔案使用本地的useState，那麼我可以更改它，但這樣不起作用，

我嘗試了許多不同的解決方案，使用自訂鉤子和本地狀態，但沒有一個解決我的問題，我在這個問題上卡了大約5個小時，真是讓我發瘋，任何幫助都將不勝感激。

我認為問題在於我試圖從返回語句中呼叫鉤子，但我無法想到任何替代方法來做到這一點，因為那是它被渲染的地方。

information.js:

<button class="active" onClick={() => useSetHero(hero)}>

hero.js:

export const useSetHero = (newHero) => {
    const UpdateHero = () => {
        const [hero, setHero] = useState(newHero);
        setHero(newHero);
    };

    return { UpdateHero };

}

我目前收到的錯誤訊息是： React Hook “useHero”不能在回呼函數中呼叫。 React Hooks必須在React函數元件或自訂的React Hook函數中呼叫

Answer 1

為鉤子本身定義狀態，而不是鉤子內部的函數。例如：

export const useHero = (initialHero) => {
  const [hero, setHero] = useState(initialHero);

  const UpdateHero = (newHero) => {
    setHero(newHero);
  };

  return { UpdateHero };
}

此外，請注意這裡的initialHero和newHero之間的差異。前者在首次呼叫鉤子時用於初始化第一個狀態值：

const { UpdateHero } = useHero(someValueHere);

而後者在呼叫UpdateHero時用於將其更新為新值：

<button class="active" onClick={() => UpdateHero(hero)}>

請注意，在上述程式碼中，您不會直接在標記中呼叫鉤子。鉤子會在元件的早期調用（並且在每次渲染中以相同的順序調用相同的鉤子）。然後可以稍後使用鉤子傳回的資料和/或函數。

---

一些注意事項：

1. 這裡沒有使用hero。我想鉤子也應該返回該值，以便可以使用它。
2. UpdateHero在這裡是多餘的，您可以直接回傳setHero。

我假設這兩個問題都是因為這只是您嘗試做的事情的一個非常簡化的示例，實際的鉤子比這個更複雜。但是，如果不考慮這些問題，上述鉤子可以簡化為：

export const useHero = (initialHero) => {
  const [hero, UpdateHero] = useState(initialHero);

  return { hero, UpdateHero };
}