Saya memiliki sesuatu seperti:

const initialState={
 hide: true
 product:[
         {name: ''
          price: ''},
          {name: ''
          price: ''},
          {name: ''
          price: ''},
         ]
}

class Products extends Component {
  state = { ...initialState }

}
clearState = () =>{
  this.setState({...initialState})
}

Saya ingin menghapus status dengan menggunakan objek initialState, tetapi ketika saya mencoba melakukannya tidak ada yang terjadi. Saya perhatikan bahwa initialState saya mengambil nilai yang sama dengan state saya, jadi, ketika saya menjalankan fungsi lain untuk mengedit state, initialState saya juga berubah.

Ada saran? Terima kasih

0
Brian Nieto 27 Januari 2020, 00:49

2 jawaban

Jawaban Terbaik

Status awal Anda masih menyimpan referensi ke array, yang berarti jika Anda mengubah array di tempat lain, itu akan berubah di mana-mana.

Untuk mengatasi masalah ini, Anda bisa menggunakan fungsi yang akan membuat initialState baru untuk Anda gunakan, seperti ini:

const initialState = () => {
    return {
        hide: true,
        product: [
            {name: '', price: ''},
            {name: '', price: ''},
            {name: '', price: ''},
        ]
    };
};

class Products extends Component {
    state = initialState();

    clearState = () =>{
        this.setState(initialState());
    }
}
2
Mat Sz 26 Januari 2020, 21:56

Apa yang perlu Anda pahami tentang objek javascript adalah bahwa semua propertinya yang berisi objek atau array hanya akan menjadi referensi ...

Itu berarti bahwa jika Anda menyalinnya menggunakan operator istirahat, array produk akan sama dalam semua kasus ...

Cara terbaik untuk mencapainya adalah dengan membuat fungsi untuk mengembalikan status awal, atau JSON.parse(JSON.stringify(initialState) yang kasar).

1
Zeeh Tecnologia 26 Januari 2020, 21:58