API调用后useState不更新变量[重复]

Question

我认为这个问题之前已经回答过了，但是我尝试浏览了所有类似标题的问题，但我仍然有点困惑。

我的代码从三词地址 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

就像阿廷说的。如果你想用 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)      
});

Answer 2

很像继承React.Component或React.PureComponent创建的Class组件中的setState，使用useState hook提供的updater更新状态也是异步的，不会立即反映。

看看这个satck overflow question

Answer 3

这是因为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>
)
}