React hooks - Как вызвать useEffect по требованию? - PullRequest
Новая
       4

React hooks - Как вызвать useEffect по требованию?

0 голосов
/ 24 апреля 2019

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

1 Ответ

1 голос
/ 24 апреля 2019

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