Dalam ReactJS, bagaimana untuk mengemas kini nilai useState daripada fail berasingan?

Question

Saya cuba mengakses dan mengemas kini keadaan objek daripada dua fail berbeza, jika saya menggunakan useState setempat untuk setiap fail maka saya boleh menukarnya, tetapi itu tidak berfungsi,

Saya mencuba pelbagai penyelesaian yang berbeza, menggunakan cangkuk tersuai dan keadaan setempat tetapi tiada satu pun daripada mereka menyelesaikan masalah saya, saya terperangkap dalam isu ini selama kira-kira 5 jam dan ia benar-benar membuatkan saya gila, sebarang bantuan akan dihargai Hebat.

Saya rasa masalahnya ialah saya cuba memanggil cangkuk dari pernyataan pulangan, tetapi saya tidak dapat memikirkan sebarang cara alternatif untuk melakukannya, kerana di situlah ia dipaparkan.

maklumat.js:

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

hero.js:

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

    kembali { UpdateHero };

}

Mesej ralat yang saya terima sekarang ialah: React Hook "useHero" tidak boleh dipanggil dalam fungsi panggil balik. React Hooks mesti dipanggil dalam komponen fungsi React atau fungsi React Hook tersuai

Answer 1

Tentukan keadaan untuk cangkuk itu sendiri, bukan untuk fungsi di dalam cangkuk. Contohnya:

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

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

  return { UpdateHero };
}

Selain itu, sila ambil perhatian perbezaan antara initialHero和newHero di sini. Yang pertama digunakan untuk memulakan nilai keadaan pertama apabila cangkuk pertama kali dipanggil:

const { UpdateHero } = useHero(someValueHere);

Dan yang terakhir digunakan untuk mengemas kininya kepada nilai baharu apabila memanggil UpdateHero:

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

Sila ambil perhatian bahawa dalam kod di atas anda tidak memanggil cangkuk secara langsung dalam markup. Cangkuk dipanggil awal dalam komponen (dan cangkuk yang sama dipanggil dalam susunan yang sama pada setiap render). Data dan/atau fungsi yang dikembalikan oleh cangkuk kemudiannya boleh digunakan kemudian.

---

Beberapa nota:

1. Tidak digunakan di sinihero. Saya rasa cangkuk juga harus mengembalikan nilai itu supaya ia boleh digunakan.
2. UpdateHero在这里是多余的，您可以直接返回setHeroIni berlebihan di sini, anda hanya boleh mengembalikan setHero.

Saya mengandaikan kedua-dua soalan ini adalah kerana ini hanyalah contoh yang sangat ringkas tentang perkara yang anda cuba lakukan, cangkuk sebenar adalah lebih kompleks daripada ini. Walau bagaimanapun, jika isu ini tidak dipertimbangkan, cangkuk di atas boleh dipermudahkan kepada:

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

  return { hero, UpdateHero };
}