javascript - React hooks - 不能在普通异步函数中使用 hook？

Question

我是 hooks 的新手，到目前为止印象还不错，但是，如果我尝试在函数内部使用 hooks，它似乎会提示(无效的​​ hook 调用。Hooks can only be called inside of the body of a function component . 这可能由于以下原因之一而发生)。

我在一个基本文件中有几个常用的 API 函数，用于从 API 检索数据。它们不会返回任何东西，而只是将 (useDispatch) 分派(dispatch)到商店，并且使用此状态的关联组件会在整个应用程序中更新。我知道这可能是因为它没有返回 React 元素的原因，但是有没有办法解决这个问题或更好、更“推荐”的 React 方法？如果我必须手动传入用户并在父组件中分派(dispatch)返回结果，这不是世界末日，但我宁愿将它保存在一个地方并在这个函数中处理它，所以所有父组件都有要做的是在状态改变时更新。

这是函数:

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");

谢谢大家，非常感谢。

Answer 1

Hook 不同于函数。考虑到你想实现一个自定义钩子(Hook)，你首先需要在你的钩子(Hook)名称前加上前缀 use

其次，钩子(Hook)不能返回异步值，除非你将它存储在状态中。此外，您还需要使用 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])
}

此外，由于您只是更新状态，因此您可以编写另一个选择器以从 redux store 获取汽车值

用法:

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