Question

我是钩子的新手，到目前为止，它给人留下了深刻的印象，但是，如果我尝试在函数内部使用钩子（无效的钩子调用，似乎只能抱怨）。只能在函数组件主体内部调用钩子。可能由于以下原因之一而发生）。

我在基本文件中有几个常用的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");

谢谢，非常感谢。

Answer 1

挂钩与功能不同。考虑到要实现自定义钩子，首先需要在钩子名称前加上use

第二个钩子不能返回异步值，除非您将其存储在状态中。另外，您还需要使用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商店获取汽车价值

用法：

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

React钩子-无法在普通异步函数中使用钩子？

1 个答案: