Question

我遇到了自定义钩子的问题。我无法访问函数中的状态。例如：数据，错误，加载

显示错误：“未定义加载” 。我知道变量不在范围内，但我想使用加载错误。

export const useLikeTrack = track => {

  const { addFavoriteTrack } = useTrackContext();
  const [success, setSuccess] = useState(false)

  const likeTrack = (params) => {
    const { data, error, loading } = useAxios({
        axiosInstance: myApiAxiosInstance,
        url: `tracks/${track["id"]}/likes`,
        method: "POST"
      });
  }

  useEffect(() => {
    if (!loading && data) {
      addFavoriteTrack(track);
      setSuccess(true);
    }
  }, [loading, data]);
  return { loading, error, success, likeTrack };
};

export default function TrackItem({ track }) {

  const {success, loading, error, likeTrack} = useLikeTrack(track.id)
  return (
    <div className="flex">
      <button className="" onClick={likeTrack}>Like
      </button>
    </div>
  );
}

您能帮我解决它吗？我正在通过以下方式使用 useAxios ：https://github.com/angelle-sw/use-axios-client

Answer 1

if (!loading && data) {

在该范围内没有声明loading或data。它们位于另一个名为likeTrack()

的函数中

更具体地说：

const likeTrack = (params) => {
  const { data, error, loading } = useAxios({
// ...
  }
}

该功能之外的这些变量（data, error, loading）

Answer 2

您似乎正在将track.id而不是track传递到自定义挂钩。

Answer 3

正如@Aprillion在评论中建议的那样，您应该使用普通的axios包在处理程序中创建请求，如下所示：

import axios from "axios";

...
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState();

  const likeTrack = (params) => {
    setLoading(true);
    myApiAxiosInstance.post(`tracks/${track["id"]}/likes`)
    .then(response => {
       setLoading(false);
       setData(response.data)
    })
  }
...

但是，如果您真的想使用钩子，请尝试使用axios-hooks库。除了它的npm下载次数远比您的软件包要晚外，您还可以手动调用axios请求，这基本上是您在此处所需要的。

首先，使用npm install axios axios-hooks

安装该库

然后像这样调整代码：

import axios from "axios";

...
   const [{ data, error, loading }, execute] = useAxios({
        axiosInstance: myApiAxiosInstance,
        url: `tracks/${track["id"]}/likes`,
        method: "POST"
      },
      {
        manual: true // This is important, otherwise your request would be fired automatically after your component mounted
   });

  const likeTrack = (params) => {
    execute(); // execute the request manually
  }
...

请注意如何将useAxios返回值与数组包装在一起，并在末尾添加execute。使用execute()可以手动触发请求。另外，不要忘记将您的请求配置为仅手动触发，如示例所示。

来源： https://github.com/simoneb/axios-hooks#example

React Hook：无法访问函数中的状态

3 个答案: