Cách sử dụng toán tử gia tăng trong React

Question

Tại sao khi tôi đang làm this.setState({count:this.state.count*2}) nó đang hoạt động, nhưng khi tôi đang thực hiện: this.setState({count:this.state.count++}) nó không hoạt động?

Tại sao và cách khắc phục?

Full mã:

var Hello = React.createClass({ 
    getInitialState:function(){ 
    return {count:parseInt(this.props.count)} 
    }, 
    a:function(){ 
    this.setState({count:this.state.count++}) 
    console.log(this.state) 
    }, 
    render: function() { 
    console.log(this.state) 
    return <div onClick={this.a}>Click to increment the counter<b> {this.state.count} </b></div>; 
    } 
}); 

ReactDOM.render(
    <Hello count="1" />, 
    document.getElementById('container') 
); 

Nhưng mã này đang làm việc:

a:function(){ 
    this.setState({count:this.state.count*2}) 
    console.log(this.state) 
    }, 

JSFiddle: https://jsfiddle.net/69z2wepo/55100/

Answer 1

Bằng cách thực hiện this.state.count++, bạn thay đổi trạng thái, vì nó giống như việc thực hiện this.state.count += 1. Bạn không bao giờ nên đột biến trạng thái (xem https://facebook.github.io/react/docs/component-api.html). Thay vào đó, bạn muốn làm điều đó:

this.setState({ count: this.state.count + 1 }) 

Answer 2

Tôi tìm thấy một giải pháp. Khi tôi đang làm this.setState({count:++this.state.count}) nó đang hoạt động.

Lý do là khi tôi đang thực hiện this.setState({count:this.state.count++}) giá trị state.count mới không được gửi đến hàm setState phản hồi.

Answer 3

Hàm setState trả về trước khi this.state.count được tăng lên vì bạn đang sử dụng toán tử hậu sửa lỗi (++). Ngoài ra, setState là không đồng bộ, nó chấp nhận gọi lại làm đối số thứ hai được kích hoạt khi trạng thái đã được cập nhật, vì vậy bạn nên đặt console.log bên trong của cb.

Answer 4

setState là một chức năng không đồng bộ. Phản ứng có thể bó một bó của setState s với nhau. Vì vậy, giá trị của this.state.count là giá trị tại thời điểm bạn thực hiện yêu cầu.

Một giải pháp tốt hơn để gọi hàm được đánh giá tại thời điểm setState được thực hiện.

this.setState((prevState, props) => ({ 
    counter: prevState.counter + 1 
})); 

từ https://facebook.github.io/react/docs/state-and-lifecycle.html

Answer 5

Bạn đang cố gắng đột biến trạng thái (truy cập this.state.field và tăng giá trị của nó) đó là ++ là gì. Nó cố gắng tăng giá trị trạng thái đó, và sau đó gán nó cho trạng thái mới :) Chỉ có trạng thái biến đổi bao giờ bằng cách gọi setState. Hãy thử

this.setState({count: this.state.count+1}) 

hoặc

this.setState({(state)=>({count: state.count + 1})} 

// biến trạng thái mới trong phạm vi chức năng, chúng tôi có thể chơi với điều đó, thậm chí ++ một cách an toàn. nhưng không gọi ++ trên this.state bao giờ hết. Nói chung, không sử dụng ++, đó là thực hành không tốt.
Đối với bài tập đơn giản

a+=1 || a-=1 || a*=1 || a%=1 

là tốt hơn, hay thậm chí là viết chúng một cách rõ ràng.

a = a + 1