reactjs - 即使状态更新,React useState 也会呈现初始值
问题描述
我在使用 useState 更新状态 onSubmit 时遇到问题。
这是一个学习 React Hooks 的简单天气应用。我已经多次阅读 Dan Abramov 关于如何使用 useEffect 的博文。我试图在 Stackoverflow 上找到与我的问题相近的东西,但它没有点击。
const [search, setSearch] = useState('')
// Query term
const [query, setQuery] = useState('indianapolis')
// API search results
const [data, setData] = useState([])
useEffect(() => {
let didCancel = false
const getWeather = async () => {
try {
const response = await fetch(`${baseUrl}?
q=${query}&APPID=${apiKey}`)
const data = await response.json()
if (!didCancel) {
setData(data)
}
} catch (error) {
if (!didCancel) {
throw new Error()
}
}
}
getWeather()
return () => {
// useEffect cleanup function
didCancel = true
}
}, [query])
const getSearchResults = e => {
e.preventDefault()
setQuery(search)
props.history.push('/weather', [data])
setSearch('')
}
我希望 getSearchResults() 函数使用搜索词更新 setQuery 函数。我使用了一个 console.log,发现我的状态落后了一步。当我搜索时,第一个返回值是我查询的初始值。任何帮助,将不胜感激。
解决方案
推荐阅读
- r - 数据框中计算列的自动重新计算和同步
- c# - Azure函数中实体框架的设计时工厂,传递connectionString
- visual-studio - 这个图标在 VS2019 中是什么意思?
- android - 同一个 Xamarin.Forms 项目的两个应用部署到 android
- apache-spark - 如何从数据集中返回单个单元格值?
- c++ - GMP库中函数的理解
- firebase - Firebase otp 适用于 Android 设备,不适用于 Flutter 中的 ios 设备
- mongodb - 启动存档时出错:无法解析子文档分区键的类型
- python - 如何在 Python 3.9 中指定多个参数联合类型作为类型提示
- react-native - webview/RNCWebViewManager.java:1214:错误:方法 onPermissionRequest(PermissionRequest) 已在 RNCWebChromeClient 类中定义