Membetulkan Isu Kemas Kini UI dengan Cangkuk Tersuai dalam React

Mengenalpasti Masalah Kemas Kini UI

Jika anda telah bekerja dengan pengurusan negeri dalam React, anda mungkin menghadapi senario yang mengecewakan ini: keadaan anda dikemas kini dengan betul (seperti yang dilihat dalam React DevTools atau log konsol), tetapi UI anda tidak menggambarkan perubahan tersebut.

Baru-baru ini saya menghadapi cabaran ini semasa bekerja dengan cangkuk tersuai React dan saya ingin berkongsi cara saya menyelesaikannya.

Coretan kod di bawah menunjukkan struktur projek yang saya gunakan.

// useCustomHook.jsx
function useCustomHook() {
  const [data, setData] = useState(stateData);
  const [location, setLocation] = useState("state");

  const handleLocationChange = (selectedLocation) => {
    if (selectedLocation === "state") {
      setLocation("state");
      setData(stateData);
    } else if (selectedLocation === "country") {
      setLocation("country");
      setData(countryData);
    }
  };
  return { data, location, handleLocationChange };
}

export default useCustomHook;

// App.jsx

import useCustomHook from "./useCustomHook";
import LocationFilter from "./LocationFilter";
import Table from "./Table";
import "./App.css";

export function App() {
  const { data } = useCustomHook();

  return (
    <div className="App">
      <LocationFilter />
      <Table data={data} />
    </div>
  );
}

export default App;

// LocationFilter.jsx

import useCustomHook from "./useCustomHook";

function LocationFilter() {
  const { location, handleLocationChange } = useCustomHook();

  const handleFilterByState = () => {
    handleLocationChange("state");
  };

  const handleFilterByCountry = () => {
    handleLocationChange("country");
  };

  return (
    <div>
      <button onClick={handleFilterByState}>View State Data</button>
      <button onClick={handleFilterByCountry}>View Country Data</button>
    </div>
  );
}

export default LocationFilter;

Saya mencipta cangkuk tersuai untuk mengurus perubahan keadaan apabila pengguna mengklik butang untuk melihat sama ada data khusus negeri atau seluruh negara.

Dalam App.jsx, yang berfungsi sebagai komponen induk, cangkuk tersuai dipanggil untuk mengakses keadaan data dan menghantarnya ke komponen Jadual (anak) sebagai prop.

Dalam komponen LocationFilter, pada mulanya saya membuat instant hook tersuai secara langsung untuk mengakses lokasi dan mengendalikan keadaanLocationChange, yang bertujuan untuk mengurus data yang dipaparkan dalam jadual mengikut penapis "keadaan" atau "lokasi".

Walau bagaimanapun, apabila saya mengklik butang lihat data negeri atau lihat data negara, tiada perubahan dalam UI.

Saya menyemak keadaan lokasi dalam komponen LocationFilter menggunakan React Developer Tools dan saya melihat bahawa lokasi dan keadaan data sedang dikemas kini seperti yang dijangkakan dengan nilai yang betul. Walau bagaimanapun, UI tidak menggambarkan perubahan kepada keadaan data apabila saya mengklik butang.

Apa yang Menyebabkan Isu Pengurusan Keadaan Reaksi Saya?

? Pendekatan awal saya kelihatan logik: Saya menganggap bahawa memanggil cangkuk tersuai dalam setiap komponen akan membolehkan setiap satu mengakses dan berkongsi contoh keadaan yang sama.

Carta Alir: Sebelum Menaikkan Negeri

• Instance cangkuk bebas: Memanggil useCustomHook dalam LocationFilter mencipta tika yang berasingan bagi keadaan cangkuk untuk komponen itu. Setiap komponen mengekalkan keadaannya sendiri, jadi kemas kini keadaan dalam komponen LocationFilter tidak menjejaskan keadaan dalam komponen Apl.
• Nyatakan isu penyegerakan: Mengklik butang tidak mengemas kini keadaan komponen Apl, yang membawa kepada ketidakpadanan antara komponen induk dan anak. Memandangkan keadaan ibu bapa kekal tidak berubah, UI tidak mencerminkan kemas kini daripada anak, menghalang pemaparan semula dalam kedua-dua komponen.

Penyelesaian: Menjulang Negeri

React tidak menyegerakkan keadaan antara komponen melainkan anda menurunkannya melalui prop atau konteks. Untuk menyelesaikan masalah ini, saya mengalih keluar panggilan cangkuk keadaan daripada komponen LocationFilter, mengambil keadaan yang diperlukan dalam komponen Apl dan menurunkannya sebagai prop kepada komponen LocationFilter. Ini memastikan kedua-dua komponen berkongsi keadaan yang sama, perubahan dalam Apl, menyegerakkan data kedua-dua komponen.

Carta Aliran: Selepas Menaikkan Negeri

Berikut ialah kod yang dikemas kini untuk LocationFilter dan Apl

// useCustomHook.jsx
function useCustomHook() {
  const [data, setData] = useState(stateData);
  const [location, setLocation] = useState("state");

  const handleLocationChange = (selectedLocation) => {
    if (selectedLocation === "state") {
      setLocation("state");
      setData(stateData);
    } else if (selectedLocation === "country") {
      setLocation("country");
      setData(countryData);
    }
  };
  return { data, location, handleLocationChange };
}

export default useCustomHook;

// App.jsx

import useCustomHook from "./useCustomHook";
import LocationFilter from "./LocationFilter";
import Table from "./Table";
import "./App.css";

export function App() {
  const { data } = useCustomHook();

  return (
    <div className="App">
      <LocationFilter />
      <Table data={data} />
    </div>
  );
}

export default App;

Kesimpulan

Pengalaman ini telah mengukuhkan pemahaman saya tentang cangkuk tersuai, kepentingan menaikkan keadaan kepada komponen induk yang sama dan amalan terbaik untuk pengurusan keadaan dalam React, untuk memastikan kemas kini UI yang disegerakkan dan konsisten. Walaupun cangkuk tersuai membenarkan anda berkongsi logik keadaan merentas komponen, ia tidak membenarkan anda berkongsi keadaan.

Untuk maklumat lebih terperinci, rujuk dokumentasi React tentang Cangkuk Tersuai dan Keadaan Angkat.

Atas ialah kandungan terperinci Membetulkan Isu Kemas Kini UI dengan Cangkuk Tersuai dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!