Правильное использование UseCallBack

Question

В настоящее время мой код перерисовывается каждый раз, когда обновляется параметр запроса. Однажды я удаляю параметр запроса; однако я получаю предупреждение о том, что «React Hook useCallback имеет отсутствующую зависимость:« запрос ». Либо включите ее, либо удалите массив зависимостей response-hooks / исчерпывающий-deps». Я попытался просто определить мою функцию getData внутри useEffect, но я использую getData как функцию onclick за пределами useEffect. То, что я пытаюсь сделать sh, - это сначала получить статьи о перехватах реагирования, а затем только извлекать новые данные при отправке в отличие от того, когда запрос обновляется, и не получать никаких предупреждений о том, что запрос также является отсутствующей зависимостью. Любые предложения очень помогут. код выглядит следующим образом:

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 в качестве условия для запуска вашего топора ios запрос

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