I am using react-query's useMutation() to POST data, I am able to successfully post the data. But, The response i am returning after successfully posting the data I want to use that response and display it in ponent
For this I am using state, and i am setting state inside onSuccess function in useMutation() hook, but it is giving me error Error: TypeError: Cannot read property 'tidpWarnings' of undefined at Object.onSuccess (UpdateMIDPPage.jsx:80) at mutation.js:86
Below is my code for reference
const UpdateMIDPPage = ({ open, handleClose }) => {
const classes = useStyles()
const [tidpFiles, setTidpFiles] = useState([])
const [reportFile, setReportFile] = useState('')
const [tidpWarnings, setTidpWarnings] = useState([])
const [reportWarnings, setReportWarnings] = useState([])
const [toggleVisibleIcon, setToggleVisibleIcon] = useState(true)
const { mutate, data, isSuccess, isLoading, isIdle, isError } = useMutation(
async (body) => {
const resp = await axios.post('http://localhost:4000/api/v1/midp/update', body)
return resp.data
},
{
onSuccess: async (data) => {
console.log(data)
setTidpWarnings(data.warnings1.tidpWarnings)
setReportWarnings(data.warnings1.reportWarnings)
},
onError: async (error) => {
console.log(error)
},
},
)
const handleUpdateMIDP = () => {
const body = {
projectId,
tidpFiles,
reportFile,
}
mutate(body)
// also tried this doesnt work eiter
// mutate(body, {
// onSuccess: async () => {
// setTidpWarnings(data.warnings1.tidpWarnings)
// setReportWarnings(data.warnings1.reportWarnings)
// },
// })
}
return (
<div className={classes.container}>
<div className={classes.action}>
<div>
<Button
onClick={handleUpdateMIDP}
className={classes.updateBtn}
variant='contained'
disableElevation
startIcon={<CheckIcon />}
disabled={tidpFiles === [] ? true : reportFile === '' ? true : isSuccess ? true : false}
>
{isIdle
? 'Generate MIDP'
: isLoading
? 'Processing...'
: isSuccess
? 'Processed!'
: isError
? 'Error'
: null}
</Button>
</div>
<div>
<Tooltip title='Toggle upload section'>
<IconButton onClick={() => setToggleVisibleIcon(!toggleVisibleIcon)}>
{toggleVisibleIcon ? <VisibilityIcon /> : <VisibilityOffIcon />}
</IconButton>
</Tooltip>
</div>
</div>
{toggleVisibleIcon ? (
<UploadSection
reportFile={reportFile}
setReportFile={setReportFile}
tidpFiles={tidpFiles}
setTidpFiles={setTidpFiles}
/>
) : null}
{isLoading ? <div>loading ....</div> : null}
{isSuccess ? <WarningSection tidpWarnings={tidpWarnings} reportWarnings={reportWarnings} /> : null}
</div>
)
}
If i ment the setState code inside the onSuccess, everything works fine.
Here is the APi response for reference
{status: "success", data: {…}}
data:
ignoreFiles: (2) ["test1.xlsx", "test5.xlsx"]
warnings1: {tidpWarnings: Array(3), reportWarnings: Array(0)}
__proto__: Object
status: "success"
__proto__: Object
Please help me in figuring this out, thx
I am using react-query's useMutation() to POST data, I am able to successfully post the data. But, The response i am returning after successfully posting the data I want to use that response and display it in ponent
For this I am using state, and i am setting state inside onSuccess function in useMutation() hook, but it is giving me error Error: TypeError: Cannot read property 'tidpWarnings' of undefined at Object.onSuccess (UpdateMIDPPage.jsx:80) at mutation.js:86
Below is my code for reference
const UpdateMIDPPage = ({ open, handleClose }) => {
const classes = useStyles()
const [tidpFiles, setTidpFiles] = useState([])
const [reportFile, setReportFile] = useState('')
const [tidpWarnings, setTidpWarnings] = useState([])
const [reportWarnings, setReportWarnings] = useState([])
const [toggleVisibleIcon, setToggleVisibleIcon] = useState(true)
const { mutate, data, isSuccess, isLoading, isIdle, isError } = useMutation(
async (body) => {
const resp = await axios.post('http://localhost:4000/api/v1/midp/update', body)
return resp.data
},
{
onSuccess: async (data) => {
console.log(data)
setTidpWarnings(data.warnings1.tidpWarnings)
setReportWarnings(data.warnings1.reportWarnings)
},
onError: async (error) => {
console.log(error)
},
},
)
const handleUpdateMIDP = () => {
const body = {
projectId,
tidpFiles,
reportFile,
}
mutate(body)
// also tried this doesnt work eiter
// mutate(body, {
// onSuccess: async () => {
// setTidpWarnings(data.warnings1.tidpWarnings)
// setReportWarnings(data.warnings1.reportWarnings)
// },
// })
}
return (
<div className={classes.container}>
<div className={classes.action}>
<div>
<Button
onClick={handleUpdateMIDP}
className={classes.updateBtn}
variant='contained'
disableElevation
startIcon={<CheckIcon />}
disabled={tidpFiles === [] ? true : reportFile === '' ? true : isSuccess ? true : false}
>
{isIdle
? 'Generate MIDP'
: isLoading
? 'Processing...'
: isSuccess
? 'Processed!'
: isError
? 'Error'
: null}
</Button>
</div>
<div>
<Tooltip title='Toggle upload section'>
<IconButton onClick={() => setToggleVisibleIcon(!toggleVisibleIcon)}>
{toggleVisibleIcon ? <VisibilityIcon /> : <VisibilityOffIcon />}
</IconButton>
</Tooltip>
</div>
</div>
{toggleVisibleIcon ? (
<UploadSection
reportFile={reportFile}
setReportFile={setReportFile}
tidpFiles={tidpFiles}
setTidpFiles={setTidpFiles}
/>
) : null}
{isLoading ? <div>loading ....</div> : null}
{isSuccess ? <WarningSection tidpWarnings={tidpWarnings} reportWarnings={reportWarnings} /> : null}
</div>
)
}
If i ment the setState code inside the onSuccess, everything works fine.
Here is the APi response for reference
{status: "success", data: {…}}
data:
ignoreFiles: (2) ["test1.xlsx", "test5.xlsx"]
warnings1: {tidpWarnings: Array(3), reportWarnings: Array(0)}
__proto__: Object
status: "success"
__proto__: Object
Please help me in figuring this out, thx
Share Improve this question asked Apr 14, 2021 at 18:42 PawanPawan 1031 gold badge3 silver badges10 bronze badges1 Answer
Reset to default 4For this I am using state, and i am setting state inside onSuccess function in useMutation() hook
The data returned from useMutation will contain the response returned from the api, so there shouldn't be the need to add extra state management