即使状态更新,React useState也会呈现初始值

时间:2019-07-05 20:33:31

标签: reactjs react-hooks

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

0 个答案:

没有答案