首页 > 解决方案 > 即使状态更新,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,发现我的状态落后了一步。当我搜索时,第一个返回值是我查询的初始值。任何帮助,将不胜感激。

标签: reactjsreact-hooks

解决方案


推荐阅读