如何正确使用UseCallback钩子

Question

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

React useEffect缺少一个依赖项：'getData‘。

要么包含它，要么删除依赖数组。

我知道，在新的react规则中，我必须将它封装在useCallBack中，但我不知道如何这样做。有谁能给我提供如何正确使用，useCallBack。提前谢谢你！！

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])

我希望这能帮到你!