自定义数据上传挂钩

Question

我编写了一个简单的代码，在页面加载时从本地 json 服务器请求数据。我在几个地方重复了这段代码，我想把它放在自定义挂钩中。

告诉我如何正确编写和应用自定义挂钩？

  const [data, setData] = useState()

  useEffect(() => {
    const getPosts = async () => {
      try {
        setData(await getData('http://localhost:3001/posts'))
      } catch (error) {
        console.log('ERROR >>', error.message)
      }
    }
    getPosts()
  }, [])

我试过这样写，但是不行：

import { useEffect, useState } from "react"
import { getData } from './../helpers'

const useData = url => {

  const [currentData, setCurrentData] = useState()

  useEffect(() => {
    const getCurrentData = async () => {
      try {
        setCurrentData(await getData(url))
      } catch (error) {
        console.log('ERROR >>', error.message)
      }
    }
    getCurrentData()
  }, [url])
  
  return currentData
}

export default useData

Answer 1

请检查这个沙箱，这似乎在每个页面加载一次时加载数据。我只是不在 useEffect 中传递 URL 因为我只想在页面加载时调用它一次。

https://codesandbox.io/s/dank-sky-6fs4rq?file=/src/useData.jsx

自定义数据上传挂钩

Сustom data upload hook

reactjs

react-hooks