ตอบสนอง setState ไม่ได้อัปเดตสถานะ

ฉันมีสิ่งนี้:

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 เป็นเพียงอาร์เรย์ของตัวเลข[1, 5, 9]เช่น แต่this.state.dealersOverallTotalไม่ได้ให้ผลรวมที่ถูกต้อง แต่total? ฉันยังใช้เวลาหน่วงเวลาเพื่อดูว่าวิธีนี้ช่วยแก้ปัญหาได้หรือไม่ ชัดเจนหรือควรโพสต์โค้ดเพิ่มเติม

setState()โดยปกติจะเป็นแบบอะซิงโครนัสซึ่งหมายความว่าในขณะที่คุณconsole.logอยู่ในสถานะจะยังไม่ได้รับการอัปเดต ลองใส่บันทึกในการเรียกกลับของsetState()วิธีการ ดำเนินการหลังจากการเปลี่ยนแปลงสถานะเสร็จสมบูรณ์:

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

setState เป็นแบบอะซิงโครนัส คุณสามารถใช้วิธีการโทรกลับเพื่อรับสถานะที่อัปเดต

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

ใช้ async / await

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

การsetState()ดำเนินการเป็นแบบอะซิงโครนัสและด้วยเหตุนี้คุณconsole.log()จะถูกดำเนินการก่อนที่จะsetState()กลายพันธุ์ค่าและด้วยเหตุนี้คุณจึงเห็นผลลัพธ์

ในการแก้ปัญหาให้บันทึกค่าในฟังก์ชันเรียกกลับของsetState()เช่น:

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

ในกรณีที่มีตะขอคุณควรใช้useEffectตะขอ

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

setFruit('Apple');

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

setstate เป็นแบบอะซิงโครนัสในการตอบสนองดังนั้นหากต้องการดูสถานะที่อัปเดตในคอนโซลให้ใช้การเรียกกลับตามที่แสดงด้านล่าง (ฟังก์ชัน Callback จะดำเนินการหลังจากการอัปเดต setstate)

วิธีการด้านล่างนี้ "ไม่แนะนำ" แต่เพื่อความเข้าใจหากคุณเปลี่ยนสถานะโดยตรงคุณจะเห็นสถานะที่อัปเดตในบรรทัดถัดไป ขอย้ำว่า "ไม่แนะนำ"

เพียงแค่เพิ่มcomponentDidUpdate(){}วิธีการในรหัสของคุณก็จะใช้งานได้ คุณสามารถตรวจสอบวงจรชีวิตของ react native ได้ที่นี่:

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

ฉันมีสถานการณ์เดียวกันกับโค้ดที่ซับซ้อนและไม่มีอะไรจากคำแนะนำที่มีอยู่สำหรับฉัน

ปัญหาของฉันsetStateคือเกิดจาก func เรียกกลับซึ่งออกโดยหนึ่งในองค์ประกอบ และที่น่าสงสัยของฉันคือการโทรเกิดขึ้นพร้อมกันซึ่งทำให้ไม่สามารถsetStateตั้งค่าสถานะได้เลย

ใส่เพียงแค่ฉันมีสิ่งนี้:

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

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

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

วิธีที่ฉันมีการ "แก้ไข" มันก็จะนำdoUpdate()เข้าsetTimeoutเช่นนี้

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

ไม่เหมาะ แต่อย่างอื่นมันจะเป็นการปรับโครงสร้างที่สำคัญ

ฉันมีปัญหาเมื่อตั้งค่าสถานะการตอบกลับหลายครั้ง (ใช้สถานะเริ่มต้นเสมอ) การติดตามปัญหาreact / githubนี้ใช้ได้ผลสำหรับฉัน

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

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