Dalam komponen fungsi saya, saya memiliki larik <div> yang telah saya buat menggunakan respons dari panggilan axios.

Saya ingin merender div tersebut dalam fungsi return(). Sangat penting mereka tetap sebagai <div>s.

Upaya ini sepertinya tidak berhasil. Saya mendapatkan kesalahan tentang array yang tidak menjadi item anak yang sesuai dari React.

      const [firstNames, setFirstNames] = setState([])
      ....
      let firstNamesArray = JSON.parse(response.data.first_names)
      let newArr = []

      firstNamesArray.forEach(element => newArr.push(<div>{element}</div>));
      setFirstNames(newArr)

      ....
      return (
         {firstNames}
      }

Apakah ada cara untuk merender array s atau elemen JSX lainnya dalam satu variabel seperti pada contoh di atas?

0
AlwaysQuestioning 12 Mei 2021, 04:40

2 jawaban

Jawaban Terbaik

Meskipun secara teknis memungkinkan untuk mengembalikan hanya larik elemen BEJ:

return firstNames;

Negara tidak boleh terdiri dari elemen BEJ. Sebagai gantinya, setel larik first_names (dari string?) ke status, lalu petakan status ke <div> hanya saat merender:

setFirstNames(JSON.parse(response.data.first_names));
// choose some appropriate key here...
return firstNames.map((name, i) => <div key={i}>{name}</div>);
3
CertainPerformance 12 Mei 2021, 01:43

const firstNamesArray = JSON.parse(response.data.first_names)

return firstNamesArray.map((element, index) => (<div key={index}>{element}</div>))


1
Liu Lei 12 Mei 2021, 01:56