Блог

Я переписываю таблицу 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 также отслеживает его. Но, возможно, это не лучшая практика? Есть ли лучший способ?

Все, что вам нужно сделать, это извлечь 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 }
}