反应 setState 不更新状态

Question

所以我有这个：

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 给出了正确的总数？我什至设置了超时延迟，看看这是否解决了问题。有什么明显的或者我应该 post 更多代码吗？

Answer 1

setState() 通常是异步的，这意味着在您 console.log 状态时，它还没有更新。尝试将日志放在 setState() 方法的回调中。状态改变完成后执行：

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

Answer 2

setState()操作是异步，因此您的console.log()将在setState()改变值之前执行，因此您会看到结果。

解决，将值记录在setState()的回调函数中，如：

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

Answer 3

setState 是异步的。您可以使用回调方法来获取更新状态。

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

Answer 4

使用async/await

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

Answer 5

只需在您的代码中添加 componentDidUpdate(){} 方法，它就会起作用。你可以在这里查看 React Native 的生命周期：

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

Answer 6

如果是钩子，你应该使用useEffect钩子。

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

setFruit('Apple');

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

Answer 7

我在多次设置反应状态时遇到了问题（它总是使用默认状态）。遵循这个 react/github 问题对我有用

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

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

Answer 8

我遇到了一些复杂代码的相同情况，现有建议对我没有任何帮助。

我的问题是 setState 是由其中一个组件发出的回调函数发生的。我怀疑调用是同步发生的，这完全阻止了 setState 设置状态。

简单地说我有这样的东西：

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

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

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

我必须 "fix" 的方法是像这样将 doUpdate() 放入 setTimeout：

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

不理想，否则将是一次重要的重构。

Answer 9

react 中的 setState 是异步的，因此要在控制台中查看更新后的状态，请使用如下所示的回调（回调函数将在 setState 更新后执行）

this.setState({ email: 'test@example.com' }, () => {
   console.log(this.state.email)
)}

Answer 10

除了注意 setState 的异步性质外，请注意您可能有相互竞争的事件处理程序，一个执行您想要的状态更改，另一个立即再次撤消它。例如，在其父级也处理 onClick 的组件上的 onClick。通过添加跟踪进行检查。通过使用 e.stopPropagation.

来防止这种情况

Answer 11

如果您使用函数，则需要使用 UseEffect 来处理 setState 的异步（您不能像使用类时那样使用回调）。一个例子：

import { useState, useEffect } from "react";

export default function App() {
 const [animal, setAnimal] = useState(null);

 function changeAnimal(newAnimal) {
  setAnimal(newAnimal);
  // here 'animal' is not what you would expect
  console.log("1", animal);
 }

 useEffect(() => {
  if (animal) {
   console.log("2", animal);
  }
 }, [animal]);

 return (
  <div className="App">
  <button onClick={() => changeAnimal("dog")} />
 </div>
 );
}

第一个console.logreturns空，第二个returns'dog'

反应 setState 不更新状态

React setState not updating state

javascript

state

setstate

reactjs