正确使用UseCallBack

Question

目前，每次更新查询参数时，我的代码都会重新呈现。一旦我删除查询参数；但是，我收到一条警告，指出“React Hook useCallback 缺少依赖项：'query'。要么包含它，要么删除依赖项数组react-hooks/exhaustive-deps”。我尝试在 useEffect 中定义 getData 函数，但我在 useEffect 之外将 getData 用作 onclick 函数。我想要完成的是最初在反应挂钩上获取文章，然后仅在提交时获取新数据，而不是在更新查询时获取新数据，并且也不会收到有关查询缺少依赖项的任何警告。任何建议都会有很大帮助。代码如下：

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

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

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

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

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

  return (
    <div>
      <input type='text' onChange={handleChange} value={query} />
      <button type='button' onClick={getData}>
        Submit
      </button>
      {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

添加submitting状态作为触发 axios 请求的条件

  const [submitting, setSubmitting] = useState(true)
  const [data, setData] = useState(null)
  const [query, setQuery] = useState("react hooks")

  useEffect(() => {
    const getData = async () => {
      const response = await axios.get(
        `http://hn.algolia.com/api/v1/search?query=${query}`
      )
      setData(response.data)
      setSubmitting(false) // call is finished, set to false
    }

    // query can change, but don't actually trigger 
    // request unless submitting is true

    if (submitting) { // is true initially, and again when button is clicked
      getData()
    }
  }, [submitting, query])

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

  const getData = () => setSubmitting(true)

如果您愿意useCallback，可以将其重构为：

  const [submitting, setSubmitting] = useState(true)
  const [data, setData] = useState(null)
  const [query, setQuery] = useState("react hooks")

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

  useEffect(() => {
    if (submitting) { // is true initially, and again when button is clicked
      getData().then(() => setSubmitting(false))
    }
  }, [submitting, getData])

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

并在渲染中

<button type='button' onClick={() => setSubmitting(true)}>