Wie aktualisiere ich in ReactJS den Wert von useState aus einer separaten Datei?

Question

Ich versuche, auf den Status eines Objekts aus zwei verschiedenen Dateien zuzugreifen und ihn zu aktualisieren. Wenn ich für jede Datei einen lokalen useState verwende, kann ich ihn ändern, aber das funktioniert nicht.

Ich habe viele verschiedene Lösungen ausprobiert, mit benutzerdefinierten Hooks und lokalem Status, aber keine davon hat mein Problem gelöst. Ich steckte ungefähr fünf Stunden lang in diesem Problem fest und es machte mich wirklich wahnsinnig. Ich wäre für jede Hilfe dankbar. Vielen Dank.

Ich denke, das Problem besteht darin, dass ich versuche, den Hook über die Return-Anweisung aufzurufen, aber mir fällt keine alternative Möglichkeit ein, dies zu tun, da er dort gerendert wird.

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

}

Die Fehlermeldung, die ich derzeit erhalte, lautet: Der React Hook „useHero“ kann nicht in einer Callback-Funktion aufgerufen werden. React Hooks müssen in einer React-Funktionskomponente oder einer benutzerdefinierten React Hook-Funktion aufgerufen werden

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