React setState không cập nhật trạng thái

Vì vậy, tôi có cái này:

let total = newDealersDeckTotal.reduce(function(a, b) {
  return a + b;
},
0);

console.log(total, 'tittal'); //outputs correct total
setTimeout(() => {
  this.setState({dealersOverallTotal: total});
}, 10);

console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); //outputs incorrect total

newDealersDeckTotal chỉ là một mảng số, [1, 5, 9]ví dụ, tuy nhiên this.state.dealersOverallTotalkhông cung cấp tổng số chính xác nhưng totalkhông? Tôi thậm chí còn đặt thời gian chờ để xem liệu điều này có giải quyết được vấn đề hay không. bất kỳ rõ ràng hay tôi nên đăng thêm mã?

setState()thường là không đồng bộ, có nghĩa là tại thời điểm bạn console.logtrạng thái, nó chưa được cập nhật. Hãy thử đưa nhật ký vào lệnh gọi lại của setState()phương thức. Nó được thực thi sau khi thay đổi trạng thái hoàn tất:

this.setState({ dealersOverallTotal: total }, () => {
  console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1');
}); 

setState là không đồng bộ. Bạn có thể sử dụng phương pháp gọi lại để cập nhật trạng thái.

changeHandler(event) {
    this.setState({ yourName: event.target.value }, () => 
    console.log(this.state.yourName));
 }

Sử dụng async / await

async changeHandler(event) {
    await this.setState({ yourName: event.target.value });
    console.log(this.state.yourName);
}

Các setState()hoạt động là không đồng bộ và do đó bạn console.log()sẽ được thực hiện trước khi setState()đột biến các giá trị và do đó bạn sẽ thấy kết quả.

Để giải quyết nó, hãy ghi lại giá trị trong hàm gọi lại của setState(), như:

setTimeout(() => {
    this.setState({dealersOverallTotal: total},
    function(){
       console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1');
    });
}, 10)

Trong trường hợp móc, bạn nên sử dụng useEffecthook.

const [fruit, setFruit] = useState('');

setFruit('Apple');

useEffect(() => {
  console.log('Fruit', fruit);
}, [fruit])

Setstate là không đồng bộ trong phản ứng, vì vậy để xem trạng thái cập nhật trong bảng điều khiển, hãy sử dụng lệnh gọi lại như được hiển thị bên dưới (Hàm gọi lại sẽ thực thi sau khi cập nhật setstate)

Phương pháp dưới đây "không được khuyến nghị" nhưng để hiểu rõ, nếu bạn thay đổi trạng thái trực tiếp, bạn có thể thấy trạng thái cập nhật trong dòng tiếp theo. Tôi lặp lại điều này là "không được khuyến khích"

chỉ cần thêm componentDidUpdate(){}phương thức vào mã của bạn và nó sẽ hoạt động. bạn có thể kiểm tra vòng đời của react native tại đây:

https://images.app.goo.gl/BVRAi4ea2P4LchqJ8

Tôi gặp sự cố khi đặt trạng thái phản ứng nhiều lần (nó luôn sử dụng trạng thái mặc định). Sau đây, sự cố react / github này đã làm việc cho tôi

const [state, setState] = useState({
  foo: "abc",
  bar: 123
});

// Do this!
setState(prevState => {
  return {
    ...prevState,
    foo: "def"
  };
});
setState(prevState => {
  return {
    ...prevState,
    bar: 456
  };
});

Tôi đã gặp trường hợp tương tự với một số mã phức tạp và không có gì từ các đề xuất hiện có hiệu quả với tôi.

Vấn đề của tôi setStateđã xảy ra từ chức năng gọi lại, được cấp bởi một trong các thành phần. Và điều đáng ngờ của tôi là cuộc gọi đã diễn ra đồng bộ, điều này đã ngăn cản setStateviệc thiết lập trạng thái.

Nói một cách đơn giản, tôi có một cái gì đó như thế này:

render() {
    <Control
        ref={_ => this.control = _}
        onChange={this.handleChange}
        onUpdated={this.handleUpdate} />
}

handleChange() {
    this.control.doUpdate();
}

handleUpdate() {
    this.setState({...});
}

Cách tôi phải "sửa chữa" nó là đưa doUpdate()vào setTimeoutnhư thế này:

handleChange() {
    setTimeout(() => { this.control.doUpdate(); }, 10);
}

Không lý tưởng, nhưng nếu không nó sẽ là một tái cấu trúc đáng kể.