React hooks - Не можете использовать hook внутри простой функции asyn c? - PullRequest
Новая
       8

React hooks - Не можете использовать hook внутри простой функции asyn c?

1 голос
/ 17 апреля 2020

Я новичок в хуках и до сих пор был слегка впечатлен, однако, мне кажется, что я жалею, если пытаюсь использовать хуки внутри функции (Недопустимый вызов хука. Хуки могут быть вызваны только внутри тела компонента функции) Это может произойти по одной из следующих причин).

У меня есть несколько общих функций API внутри базового файла, которые используются для получения данных из API. Они НЕ возвращают ничего и просто отправляют (useDispatch) в хранилище, и связанные компоненты, использующие это состояние, обновляются по всему приложению. Я понимаю, что, возможно, причина в том, что он не возвращает элемент React, но есть ли способ обойти это или лучший, более «рекомендуемый» подход React? Это не конец света, если мне придется вручную передать пользователя и отправить возвращаемый результат в родительском компоненте, но я бы предпочел сохранить его в одном месте и обработать все в этой функции, чтобы все родительские компоненты имели сделать, это обновить, когда состояние меняется.

Это функция: 

export async function getCar(id) {

  // It's complaining about these hooks
  const { user } = useSelector(state => state.auth);
  const dispatch = useDispatch();

  try {
      let response = await axios.get(`${baseURL}api/cars/getCar/${id}/${user.id});
      if (response.data.successCode === 200) dispatch(setCar(response.data));
  } catch (error) {

  }
}

ИСПОЛЬЗОВАНИЕ: const carsList = getCar("id");

Спасибо всем, большое спасибо.

1 Ответ

3 голосов
/ 17 апреля 2020

Крюк отличается от функции. Учитывая, что вы хотите реализовать пользовательский хук, вам сначала нужно добавить к имени хука префикс use

Во-вторых, хуки не могут возвращать асинхронные значения c, если вы не сохраните их в состоянии. Также вам необходимо использовать функцию useEffect, чтобы убедиться, что запрос API запускается только один раз или при изменении параметра id. 

export function useGetCar(id) {
  // It's complaining about these hooks
  const { user } = useSelector(state => state.auth);
  const dispatch = useDispatch();
  useEffect(() => {
     async function myFn() {
        try {
              let response = await axios.get(`${baseURL}api/cars/getCar/${id}/${user.id});
              if (response.data.successCode === 200) dispatch(setCar(response.data));
        } catch (error) {

        }

      }
      fn()
  }, [id])
}

Кроме того, поскольку вы просто обновляете состояние, вы можете написать другой селектор для получить стоимость автомобиля в магазине редуксов

использование: 

const Comp = ({id}) => {
    useGetCar(id);
    const car = useSelector(state => state.car);
}
...