Ketika saya memiliki kelas tombol yang disebut "DrawButton", yang memiliki render ini

render() {
    return(
        <Button
            onClick={this.props.toggleDraw.bind(this)}
            style={{
                backgroundColor: this.props.drawMode ? 'red' : 'blue'
            }}
        >
            Draw
        </Button>
    );
}

Dan di App.js induk, statusnya ditentukan

state = {
        drawMode: false
}

Dan ada fungsi handler

toggleDraw = (e) => {
    console.log('App.js drawMode:' + this.state.drawMode);
    this.setState({
        drawMode: !this.state.drawMode
    });
    console.log('App.js drawMode:' + this.state.drawMode);
}

Dan akhirnya tombol:

render() {
  return (
    <div className="App">
        <DrawButton 
            toggleDraw={this.toggleDraw} 
            drawMode={this.state.drawMode}
        />
    </div>
  );
}

Negara tidak diperbarui dengan benar. Ini menghasilkan yang berikut:

Klik pertama pada Tombol

App.js drawMode:false
App.js:27
App.js drawMode:false
App.js:31

Sebelum setState dijalankan, drawMode salah setelah setState dijalankan, drawMode masih salah.

Tapi tombolnya masih mendapat latar belakang merah.

Klik kedua pada Tombol:

App.js drawMode:true
App.js:22
App.js drawMode:true
App.js:26

Tapi tombolnya berwarna biru lagi jika drawMode dalam keadaan disetel ke true.

Mengapa inkonsistensi ini terjadi?

-2
user6329530 28 Oktober 2019, 04:33

1 menjawab

Jawaban Terbaik

Pertama, bind Anda salah digunakan, di DrawButton handler onClick Anda, panggil saja this.props.toggleDraw. Kode ini : this.props.toggleDraw.bind(this) harus dalam konstruktor file App.js.

Kedua, jangan gunakan console.log untuk memeriksa nilai status setelah pengaturan, karena fungsi setState berjalan secara asinkron, gunakan panggilan balik setState untuk memeriksa nilai setelah pengaturan:

toggleDraw = (e) => {
    console.log('App.js drawMode:' + this.state.drawMode);
    this.setState(
        { drawMode: !this.state.drawMode },
        () => console.log('App.js drawMode:' + this.state.drawMode)
    ),
}
1
thelonglqd 28 Oktober 2019, 01:48