在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 };
}