为什么我会在控制台中遇到无效的挂钩错误？

Question

我无法弄清自己的一生，为什么在通过React查询使用突变时会遇到此错误。任何形式的反馈都将不胜感激。

注意： 我正在使用函数（react）组件内部，因此我不确定为什么会丢弃此错误。

错误：

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

代码：

const addAsset = (asset) => {
    return axios.post('http://localhost/api/file-upload', asset);
}

const fileUpload = () => {
    const url = 'http://localhost/api/file-upload';

    let formData = new FormData();
    let imagefile = document.querySelector('#file');
    formData.append("image", imagefile.files[0]);

    const headers = {
        "Accept": 'application/json',
        "Authorization": `Bearer ${authToken}`
    }

    axios.post(url, formData, {headers})
        .then(resp => {
            let okStatus       = resp.status;
            let successMessage = resp.data.message;

            if(okStatus) {
                setShow(false);
            }

            setUploadSuccess(okStatus);
            setStatusMessage(successMessage);
            setStatusCode(okStatus);
        }).catch(error => {
        let errorMessage       = error.response.data.message;
        let errorStatus        = error.response.status;

        setStatusMessage(errorMessage);
        setStatusCode(errorStatus);
    });

    const queryClient = useQueryClient();

    return useMutation(addAsset, {
        onSuccess: () => {
            queryClient.invalidateQueries('uploads');
        }
    });
}

return(<Button variant="primary" onClick={fileUpload}>Upload!</Button>);

Answer 1

正如错误消息所说，只能在功能组件的正文中调用钩子。他们无法在单击回调中被调用。您将需要将挂钩调用从FileUpload中移出。

const queryClient = useQueryClient();

const { mutate } = useMutation(addAsset, {
  onSuccess: () => {
    queryClient.invalidateQueries('uploads');
  }
});

const fileUpload = () => {
  const url = 'http://localhost/api/file-upload';
  // ...
  axios.post(url, formData, {headers})
     .then(
  // ...

  mutate(/* insert variables here */);
}

另请参见：挂钩规则