Saya mencoba mengubah status gambar latar belakang saat mengarahkan elemen (ikon) tetapi saya selalu mendapatkan kesalahan "TypeError: Cannot read property "icon" of undefined", yang aneh, karena ikon berfungsi dengan baik sampai saya melayang-layang.

Senang jika ada yang bisa membantu.

Serikat:

this.state = {
      images: {
        header: "path to img",
        icon: "path to icon"
      }
}

Metode:

 handleMouseOver = () => {
    this.setState({
      images: {
        header: "new img"
      }
    });
  };

Komponen header menerima gambar:

<Header bgImg={this.state.images.header} />

Elemen melayang:

<div>
   <img onMouseOver={this.handleMouseOver} src={this.state.images.icon} />
</div>
0
vinicius-bortoletto 29 Oktober 2019, 15:54

2 jawaban

Jawaban Terbaik

Masalah ini berasal dari fungsi onMouseOver Anda, yang menetapkan nilai baru untuk status tetapi menghapus ikon dari objek gambar. Anda perlu menjalankan yang berikut ini:

 handleMouseOver = () => {
    this.setState((state, props) => {
      return {
         images: {
           header: "new img",
           icon: state.images.icon
         }
      };
    });
  };
3
sebastienbarbier 29 Oktober 2019, 13:12

Ini karena saat Anda menyetel images, Anda kehilangan status icon. Coba seperti ini:

handleMouseOver = () => {
  this.setState(prevState => ({
    images: {
      ...prevState.images,
      header: "new img"
    }
  }));
};

Anda menggunakan images lama dengan menyebarkannya dan kemudian memperbarui properti yang diperlukan. Mengapa kami menggunakan setState callback dan prevState? Karena ketika kita menetapkan keadaan baru kita, kita bergantung pada keadaan lama kita.

2
devserkan 29 Oktober 2019, 13:00