1

我正在用 React 钩子重写一个 CRUD 表。下面的自定义钩子useDataApi用于获取表的数据，观察 url 的变化——所以它会在参数变化时被触发。但我还需要在删除和编辑后获取最新的数据。我怎样才能做到这一点？

const useDataApi = (initialUrl, initialData) => {
  const [url, setUrl] = useState(initialUrl)

  const [state, dispatch] = useReducer(dataFetchReducer, { data: initialData, loading: true })

  useEffect(() => {
    const fetchData = async () => {
      dispatch({ type: 'FETCH_INIT' })
      const result = await instance.get(url)
      dispatch({ type: 'FETCH_SUCCESS', payload: result.data })
    }

    fetchData()
  }, [url])

  const doFetch = url => {
    setUrl(url)
  }

  return { ...state, doFetch }
}

由于url删除/编辑后保持不变，因此不会被触发。我想我可以有一个增量标志，并让useEffect监控它。但这可能不是最佳做法？有没有更好的办法？

4

1 回答 1

7

您需要做的就是取出该fetchData方法useEffect并在需要时调用它。还要确保将函数作为参数传递到依赖数组中。

const useDataApi = (initialUrl, initialData) => {
  const [url, setUrl] = useState(initialUrl)

  const [state, dispatch] = useReducer(dataFetchReducer, { data: initialData, loading: true })

  const fetchData = useCallback(async () => {
      dispatch({ type: 'FETCH_INIT' })
      const result = await instance.get(url)
      dispatch({ type: 'FETCH_SUCCESS', payload: result.data })
  }, [url]);

  useEffect(() => {
    fetchData()
  }, [url, fetchData]); // Pass fetchData as param to dependency array

  const doFetch = url => {
    setUrl(url)
  }

  return { ...state, doFetch, fetchData }
}
于 2019-04-24T12:40:38.117 回答