我如何从reactJS中的单独文件更新useState值？

Question

我正在尝试从两个单独的文件访问和更新对象的状态，如果我为每个文件使用本地 useState，我可以更改它，但这不起作用，

我已经尝试了许多不同的解决方案，使用自定义挂钩和本地状态，但没有一个解决我的问题，我已经在这个问题上停留了约 5 个小时，这让我发疯，任何帮助将不胜感激。

我认为问题是我试图从 return 语句内部调用钩子，但我想不出任何替代方法，因为这就是它被渲染的地方。

信息.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

   。

我假设这两个都是因为这是你想要做的事情的一个非常简单的例子，而实际的钩子做的事情比这更多。但除此之外，所示的钩子

as is可以简化为：

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

  return { hero, UpdateHero };
}