React 查询突变现在确实会使用相同的输入再次触发答案

【问题标题】：React query mutation does now trigger again with same inputReact 查询突变现在确实会使用相同的输入再次触发
【发布时间】：2021-08-28 04:20:16
【问题描述】：

当我尝试使用 useMutation 钩子进行 POST API 调用时，它第一次工作并得到正确响应（成功或错误）。如果这是一个错误，如果我用与以前相同的数据重试突变，什么也不会发生。如果我使用不同的数据，它会重新发送 POST 请求。

这是我的用例：我有一个文件输入。用户上传文件，文件通过 POST API 使用useMutation 发送，发生错误。现在，如果我作为用户尝试重新上传相同的文件，则不会发生任何事情。但如果用不同的文件重新上传，API 会再次发送。

这是我的input 代码：

    const [newAvatarFile, setNewAvatarFile] = useState<File>(null);
    const { isSuccess, error, isLoading, mutate } = useMutation(updateUserAvatar);

    useEffect(() => {
      newAvatarFile && mutate(newAvatarFile);
    }, [newAvatarFile, mutate]);

    return (
      <input
        type="file"
        accept={'image/*'}
        onChange={(e: ChangeEvent<HTMLInputElement>) => {
          setNewAvatarFile(e.target.files[0]);
        }}
      /> 
    )

这是我的 API 调用函数updateUserAvatar：

    import { AxiosError, AxiosResponse } from 'axios';
    import { Axios } from '../axios-instance';

    export const updateUserAvatar = async (data: File): Promise<Record<string, string>> => {
      let result: AxiosResponse;

      try {
        result = await Axios.post(
          '/some/api/url',
           { profile_picture: data },
           {
             headers: {
               'Content-Type': 'multipart/form-data',
           },
        }
      );
    } catch (err) {
      const error = err as AxiosError;
      throw new Error(
        error.response ? error.response.data.message || error.response.data : error.message
      );
    }

    return result.data;
  };

【问题讨论】：

标签： reactjs file-io mutation react-query

【解决方案1】：

我只能猜测效果没有运行是因为文件被认为是相同的？您是否可以在 onChange 处理程序中运行突变：

    const [newAvatarFile, setNewAvatarFile] = useState<File>(null);
    const { isSuccess, error, isLoading, mutate } = useMutation(updateUserAvatar);

    return (
      <input
        type="file"
        accept={'image/*'}
        onChange={(e: ChangeEvent<HTMLInputElement>) => {
          setNewAvatarFile(e.target.files[0]);
          mutate(e.target.files[0])
        }}
      /> 
    )

我认为这是更明确的方式，如果您只需要它来获得效果，也许您甚至可以摆脱 newAvatarFile 状态，留下：

    const { isSuccess, error, isLoading, mutate } = useMutation(updateUserAvatar);

    return (
      <input
        type="file"
        accept={'image/*'}
        onChange={(e: ChangeEvent<HTMLInputElement>) => {
          mutate(e.target.files[0])
        }}
      /> 
    )

【讨论】：