Panggilan setState() buruk dan penyelesaian yang mungkin semasa membuat persembahan!

Amaran: Tidak boleh mengemas kini komponen (Tempahan) semasa memaparkan komponen lain (Modal Pengesahan Tempahan). Untuk mencari panggilan setState() yang buruk di dalam BookingConfirmationModal, ikuti jejak tindanan seperti yang diterangkan!

Dalam aplikasi React, anda akan sering menghadapi ralat yang digeruni ini. Ralat ini timbul apabila anda cuba mengubah suai keadaan komponen (Tempahan) yang kebanyakannya merupakan komponen induk, semasa ia dalam proses menghasilkan komponen lain (BookingConfirmationModal) iaitu komponen kanak-kanak dan anda mungkin telah menyerahkan fungsi setState() ke dalam ia sebagai prop. Walau bagaimanapun, Ini boleh membawa kepada tingkah laku yang tidak dijangka dan ketidakkonsistenan dalam UI aplikasi anda.

Dalam blog ini, saya akan cuba membimbing anda memahami ralat ini, menyahpepijat sumbernya dan melaksanakan penyelesaian yang berkesan untuk menghalangnya daripada berlaku dalam projek React anda lagi.

Memahami Ralat

Proses pemaparan React direka bentuk untuk cekap dan boleh diramal. Apabila keadaan komponen atau prop berubah, React memulakan proses pemaparan semula. Semasa proses ini, React melintasi pepohon komponen, mengemas kini dan memaparkan semula komponen seperti yang diperlukan. Isu teras dengan ralat "Tidak dapat mengemas kini keadaan semasa pemaparan" terletak pada pelanggaran tertib pemaparan yang boleh diramal ini. Apabila komponen cuba mengubah suai keadaan komponen lain semasa fasa pemaparan sendiri, ia mengganggu kitaran pemaparan dan boleh menyebabkan:

• Gelung Infinite: Kemas kini keadaan mencetuskan pemaparan semula yang berterusan, yang berpotensi merosakkan aplikasi.
• UI tidak konsisten: UI mungkin tidak menggambarkan keadaan yang dimaksudkan berubah dengan tepat.
• Perlumbaan Data: Berbilang komponen mungkin cuba mengubah suai keadaan yang sama secara serentak, membawa kepada hasil yang tidak dapat diramalkan.

Kemungkinan Punca

• Kemas Kini Negeri dalam Fasa Render: Kemungkinan besar penyebabnya ialah anda memanggil setState di dalam kaedah render atau semasa proses rendering BookingConfirmationModal.

• Kesan Sampingan dalam Render: Anda mungkin melakukan kesan sampingan (seperti mengambil data atau mengemas kini keadaan) secara langsung dalam kaedah pemaparan, yang harus dielakkan.

Penyelesaian

Untuk menyelesaikan isu ini, anda harus memastikan bahawa kemas kini keadaan tidak berlaku semasa fasa pemaparan! Berikut ialah beberapa langkah yang boleh anda ambil:

• Alihkan Kemas Kini Negeri ke useEffect: Jika anda perlu mengemas kini keadaan berdasarkan beberapa syarat, gunakan cangkuk useEffect untuk melakukan kemas kini selepas komponen telah dipaparkan.

import React, { useEffect } from 'react';

const BookingConfirmationModal = ({ someProp }) => {
  useEffect(() => {
    // Perform state updates here
    // Example: setState(someValue);
  }, [someProp]); // Add dependencies if needed

  return (
    <div>
      {/* Your component JSX */}
    </div>
  );
};

• Elakkan Kemas Kini Keadaan Terus dalam Render: Pastikan anda tidak memanggil setState secara langsung dalam kaedah render atau mana-mana fungsi yang dipanggil semasa rendering.

• Semak Kemas Kini Keadaan Bersyarat: Jika anda mempunyai logik bersyarat yang mengemas kini keadaan, pastikan ia tidak dilaksanakan semasa fasa pemaparan.

• Semak useMemo anda: Jika anda telah menggunakan useMemo incase, keluarkan itu dan gunakan useEffect sebaliknya dalam komponen anak supaya ia akan berjalan selepas komponen dipasang atau alihkan anda useMemo ke komponen induk. Itu akan menyelesaikan amaran.

Penyelesaian yang mungkin kelihatan seperti -

import { useState, useEffect } from "react";
import BookingConfirmationModal from "./BookingConfirmationModal";

function App() {
  const [showModal, setShowModal] = useState(false);
  // other code

  return (
    <div>
      <h1>This is app</h1>
      <button onClick={() => setShowModal(true)}>Show Modal</button>
      {showModal ? <Testing BookingConfirmationModal={setTestingState} /> : null}
    </div>
  );
}

export default App;

// BookingConfirmationModal.jsx
const BookingConfirmationModal= ({ setTestingState }) => {

  useEffect(()=> {
    setTestingState(false)
   }, [setIsModalVisible]) //or other required dependencies

  return (
    <div>
      <button onClick={() => setTestingState(false)}>Close Modal</button>
      // other codes
    </div>
  );
};

export default BookingConfirmationModal;

Selamat pengekodan!

nak bagi cadangan:-

cari saya di Twitter Linkedin

E-mel saya di labib.ahmed.372@gmail.com

Atas ialah kandungan terperinci Panggilan setState() buruk dan penyelesaian yang mungkin semasa membuat persembahan!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!