如何正确使用 UseCallback Hook

Question

下面的代码给了我一个警告

React Hook useEffect 缺少依赖项：'getData'。
要么包含它，要么移除依赖数组

我知道在新的 react 规则中我必须将它包装在 useCallBack 中，但我不确定该怎么做。有人可以为我提供如何使用，正确使用CallBack。提前谢谢你！

import React, { useState, useEffect, useCallback } from "react"
import axios from "axios"

const Home = () => {
  const [data, setData] = useState(null)
  const [query, setQuery] = useState("reacthooks")

  useEffect(() => {
    getData()
  }, [query])

  const getData = async () => {
    const response = await axios.get(
      `http://hn.algolia.com/api/v1/search?query=${query}`
    )
    setData(response.data)
  }

  const handleChange = event => {
    event.preventDefault()
    setQuery(event.target.value)
  }

  return (
    <div>
      <input type='text' onChange={handleChange} />
      {data &&
        data.hits.map(item => (
          <div key={item.objectID}>
            {item.url && (
              <>
                <a href={item.url}>{item.title}</a>
                <div>{item.author}</div>
              </>
            )}
          </div>
        ))}
    </div>
  )
}

export default Home

Answer 1

在您的情况下，我只需将 getData 函数添加到 useEffect 挂钩中即可。

尝试以下方法：

useEffect(() => {
    const getData = async () => {
       const response = await axios.get(
           `http://hn.algolia.com/api/v1/search?query=${query}`
       )
       setData(response.data)
    }

    getData()
}, [query])

我希望这会有所帮助！