正確使用 UseCallBack

Question

目前，每次更新查詢參數時，我的代碼都會重新呈現。 一旦我刪除了查詢參數； 但是，我收到一條警告，指出“React Hook useCallback 缺少依賴項：'query'。要么包含它，要么刪除依賴項數組 react-hooks/exhaustive-deps”。 我曾嘗試在 useEffect 中定義我的 getData 函數，但我將 getData 用作 useEffect 之外的 onclick 函數。 我想要完成的是最初獲取關於 react 鈎子的文章，然后只在提交時獲取新數據，而不是在查詢更新時獲取新數據，並且沒有任何關於查詢丟失依賴項的警告。 任何建議都會有很大幫助。 代碼如下：

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