如何使用react-query中useMutation的响应来显示数据？

Question

我正在使用react-query的useMutation()来发布数据，我能够成功发布数据。\n但是，我在成功发布数据后返回的响应我想使用该响应并将其显示在组件中

\n

为此，我正在使用状态，并且我在 useMutation() 挂钩的 onSuccess 函数内设置状态，但它给了我错误\n错误：\nTypeError: 无法读取未定义\nat Object.onSuccess (UpdateMIDPPage. jsx:80)\nat 突变.js:86

\n

下面是我的代码供参考

\n

const UpdateMIDPPage = ({ open, handleClose }) => {\n  const classes = useStyles()\n  const [tidpFiles, setTidpFiles] = useState([])\n  const [reportFile, setReportFile] = useState('')\n  const [tidpWarnings, setTidpWarnings] = useState([])\n  const [reportWarnings, setReportWarnings] = useState([])\n  const [toggleVisibleIcon, setToggleVisibleIcon] = useState(true)\n\n  const { mutate, data, isSuccess, isLoading, isIdle, isError } = useMutation(\n    async (body) => {\n      const resp = await axios.post('http://localhost:4000/api/v1/midp/update', body)\n      return resp.data\n    },\n    {\n      onSuccess: async (data) => {    \n        console.log(data)\n        setTidpWarnings(data.warnings1.tidpWarnings)\n        setReportWarnings(data.warnings1.reportWarnings)\n      },\n      onError: async (error) => {\n        console.log(error)\n      },\n    },\n  )\n  const handleUpdateMIDP = () => {\n    const body = {\n      projectId,\n      tidpFiles,\n      reportFile,\n    }\n    mutate(body)\n    // also tried this doesnt work eiter\n    // mutate(body, {\n    //   onSuccess: async () => {\n    //     setTidpWarnings(data.warnings1.tidpWarnings)\n    //     setReportWarnings(data.warnings1.reportWarnings)\n    //   },\n    // })\n  }\n\n  return (\n    <div className={classes.container}>\n      <div className={classes.action}>\n        <div>       \n          <Button\n            onClick={handleUpdateMIDP}\n            className={classes.updateBtn}\n            variant='contained'\n            disableElevation\n            startIcon={<CheckIcon />}\n            disabled={tidpFiles === [] ? true : reportFile === '' ? true : isSuccess ? true : false}\n          >\n            {isIdle\n              ? 'Generate MIDP'\n              : isLoading\n              ? 'Processing...'\n              : isSuccess\n              ? 'Processed!'\n              : isError\n              ? 'Error'\n              : null}\n          </Button>\n        </div>\n        <div>         \n          <Tooltip title='Toggle upload section'>\n            <IconButton onClick={() => setToggleVisibleIcon(!toggleVisibleIcon)}>\n              {toggleVisibleIcon ? <VisibilityIcon /> : <VisibilityOffIcon />}\n            </IconButton>\n          </Tooltip>\n        </div>\n      </div>\n      {toggleVisibleIcon ? (\n        <UploadSection\n          reportFile={reportFile}\n          setReportFile={setReportFile}\n          tidpFiles={tidpFiles}\n          setTidpFiles={setTidpFiles}\n        />\n      ) : null}\n      {isLoading ? <div>loading ....</div> : null}\n      {isSuccess ? <WarningSection tidpWarnings={tidpWarnings} reportWarnings={reportWarnings} /> : null}\n    </div>\n  )\n}\n

\n

如果我在 onSuccess 中评论 setState 代码，一切都会正常。

\n

这是 APi 响应供参考

\n

{status: "success", data: {\xe2\x80\xa6}}\ndata:\nignoreFiles: (2) ["test1.xlsx", "test5.xlsx"]\nwarnings1: {tidpWarnings: Array(3), reportWarnings: Array(0)}\n__proto__: Object\nstatus: "success"\n__proto__: Object\n

\n

请帮我解决这个问题，谢谢

\n

Answer 1

为此，我正在使用状态，并且我在 useMutation() 挂钩的 onSuccess 函数内设置状态

useMutation 返回的内容data将包含 api 返回的响应，因此不需要添加额外的状态管理