Question

以下代码向我发出警告

React Hook useEffect缺少依赖项：'getData'。
包括它或删除依赖项数组

我知道在新的反应规则中，我必须将其包装在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])

我希望这会有所帮助！

如何正确使用UseCallback挂钩

1 个答案: