Dalam kode React.js saya, saya mengambil dari API dan saya mendapatkan kesalahan ini Error: Too many re-renders. React membatasi jumlah render untuk mencegah infinite loop. TOLONG APA YANG SAYA LAKUKAN SALAH?

Inilah komponen pengambilan saya di App.js

    const App = () => {
  const [records, setRecords] = useState([])
  const [loading, setLoading] = useState({ loading: false })

  
  useEffect(() => {

    (async function() {
      try {
        setLoading(true)
        const res = await fetch('http://api.enye.tech/v1/challenge/records?limit=20&skip=0')
        const data  = await res.json();
        setRecords({ records: data})
        setLoading(false)
        console.log(data);
  
      } catch (err) {
        console.error(err);
      }
    })()
     
  }, []) 

      if(loading) {
        return <Preloader />
    }
  
    return (
      <Fragment>
        <SearchBar />
        <div className='container'>
          <Records loading={setLoading()} records={setRecords()} />
        </div>
      </Fragment>
    );
  }

Dan di sinilah saya meneruskan data yang diambil sebagai alat peraga

const Records = ({ records, loading }) => {

    return (
        <div className={styles.p__container}>
        <div className="row">
            <div className="col-sm-8">
                <div className="py-3">
                    {records.length} Records
                </div>
            </div>
        </div>
        <div className={styles.p__grid}>
             {records.map(record => (
                 <RecordItem key={record.id} record={record} />
             ))
            }

        </div>
        <div className={styles.p__footer}>

        </div>
    </div>
    )

Terminal terintegrasi saya tidak menunjukkan kesalahan tetapi saya mendapatkan kesalahan ini di konsol browser saya masukkan deskripsi gambar di sini javascript reactjs

2
Bruno 10 Januari 2021, 05:18

3 jawaban

Jawaban Terbaik

kesalahan ada di baris

<Records loading={setLoading()} records={setRecords()} />

Dengan menulis setLoading() dan setRecords() Anda pada dasarnya mengubah status loading, dan records. Ini memastikan rendering ulang, karena status sedang diubah

Saya yakin, Anda mencoba meneruskan status loading dan larik records saat ini sebagai props ke komponen Records. Untuk melakukannya, Anda harus memberikan nilai seperti

<Records loading={loading} records={records} />

Itu akan menghapus kesalahan too many re-renders

Saran tentang penggunaan useState

Anda menginisialisasi status loading dan setRecords dengan cara yang berbeda dari cara Anda menggunakannya nanti.

Misalnya, Anda menginisialisasi loading sebagai {loading: false} tetapi kemudian memanggil setLoading(false). Anda harus menginisialisasi status loading sebagai status boolean menggunakan

const [loading, setLoading] = useState(false);

// example usage
setLoading(true);

Demikian pula, untuk records, Anda menginisialisasi dengan larik kosong useState([]), tetapi kemudian menyetel records status sebagai objek menggunakan setRecords({ records: data})

Anda harus menggunakan salah satu dari pendekatan

/** Approach 1 (Array typed) */
const [records, setRecords] = useState([]);

// example usage
setRecords(data);

/** Approach 2 (Object typed) */
const [records, setRecords] = useState({records: []});

// example usage
setRecords({records: data});
0
Rituraj Borpujari 10 Januari 2021, 03:19

Kemungkinan di sini, saat Anda memanggil setLoading() dan setRecords di setiap render:

<Records loading={setLoading()} records={setRecords()} />

Anda mungkin hanya ingin meneruskan variabel loading dan records:

<Records loading={loading} records={records} />
0
Nick 10 Januari 2021, 02:21

React memiliki properti yang setiap kali nilai status dalam komponen React diperbarui, komponen dirender ulang. Di sini Anda meneruskan setLoading() dan setRecords() sebagai props ke komponen Records. Anda harus melewati records dan loading sebagai gantinya. Setiap kali setLoading() dan setRecords() diperbarui, komponen Anda dirender ulang dan sebagai hasilnya, pengulangan tak terbatas dari rendering ulang terjadi.

0
Mohammad Abdul Alim 10 Januari 2021, 06:06