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

Question

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

显示错误："loading is not defined"。我知道变量超出范围但我想使用加载，错误。

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

您似乎将 track.id 而不是 track 传递给您的自定义挂钩。

Answer 2

if (!loading && data) {

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

的函数中

更具体地说：

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

这些变量 (data, error, loading) 不能在该函数之外访问

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-downloads 比你的包更新的事实之外，你可以调用 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 return 值并在末尾添加 execute 的。使用 execute() 您可以手动触发请求。另外，不要忘记将您的请求配置为仅手动触发，如示例中所示。

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

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

React Hook: Can't access states in the function

reactjs

react-hooks