useState在API调用后没有更新变量

Question

我想这个问题之前已经有了答案，但是我试着看了所有类似标题的问题，我仍然有点困惑。

我的代码从what3words API请求一些数据，然后使用setState在对象中给数据一个变量。但是，它不同步，因此console.log(modifiedData)将slug显示为空字符串。但是当您再次点击提交按钮时，slug已经更新了。

const api = require("@what3words/api");
const [modifiedData, setModifiedData] = useState({
title: '',
description: '',
category: '',
condition: '',
capacity: 0,
slug: '',
lng: 0,
lat: 0,
});

const handleSubmit = async e => {
e.preventDefault();
api.convertTo3wa({lat: modifiedData.lat, lng: modifiedData.lng}, 'en')
.then(function(getSlug) {
setModifiedData((prev) => ({
...prev,
slug: getSlug.words,
}));
console.log(modifiedData);
});

Answer 1

这是因为setState具有异步行为，所以当您制作console.log时，您不能保证数据已经更新。

您必须等待组件到reRender以确保您的数据在那里。

const [state, setState = useState(..)
const submitHandler = (e) =>{
setState({... some data})
console.log(state) //data is not gaurenteed
}
console.log(state) // first time : {} 
//second time is the data
return(
<div>
<p>app content </p>
</div>
)
}

Answer 2

很像通过扩展React创建的class组件中的setState。组件或React。在PureComponent中，使用useState钩子提供的更新器进行状态更新也是异步的，不会立即反映出来。

看看这个堆栈溢出问题

Answer 3

就像Ating说的。如果你想看到console.log的变化，你可以用setTimeOut:

来包装它

const api = require("@what3words/api");
const [modifiedData, setModifiedData] = useState({
title: '',
description: '',
category: '',
condition: '',
capacity: 0,
slug: '',
lng: 0,
lat: 0,
});
const handleSubmit = async e => {
e.preventDefault();
api.convertTo3wa({lat: modifiedData.lat, lng: 
modifiedData.lng}, 'en')
.then(function(getSlug) {
setModifiedData((prev) => ({
...prev,
slug: getSlug.words,
}));
setTimeOut(()=>{
console.log(modifiedData);
},500)      
});