不更新状态

所以我有这个:

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只是一个数字数组。 但是 this.state.dealersOverallTotal没有给出正确的总数，而 total给出了？我甚至设置了超时延迟，看看这是否解决了问题。 有什么明显的或者我应该发布更多的代码吗？

344294 次浏览
小开
最佳答案

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

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

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

要解决这个问题，在 setState()的回调函数中记录这个值，比如:

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

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

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

使用异步/等待

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

只要在代码中添加 componentDidUpdate(){}方法，它就会工作。 你可以在这里查看本地反应的生命周期:

Https://images.app.goo.gl/bvrai4ea2p4lchqj8

小开

在使用钩子的情况下，应该使用 useEffect钩子。

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


setFruit('Apple');


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

我有一个问题，当设置反应状态多次(它总是使用默认状态)。关注这个 反应[反应][反应][反应]的问题对我很有帮助

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


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

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

我的问题是 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);
}

不是很理想，但是否则它将是一个重要的重构。

小开

SetState 在响应中是异步的，因此要查看控制台中更新的状态，可以使用如下所示的回调(在 setState 更新之后执行 Callback 函数)

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

除了注意 setState 的异步特性之外，还要注意可能有相互竞争的事件处理程序，一个执行所需的状态更改，另一个立即撤消该状态更改。例如，在其父级也处理 onClick 的组件上 onClick。通过添加跟踪来检查。通过使用 e.stop 传播来防止这种情况。

小开

如果使用函数，则需要使用 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. log 返回 null，第二个返回‘ dog’


提交答案