Reactjs 获取并使用响应更改React中的状态

我想根据PUT请求的响应使用更改组件的状态

尤其是当PUT的响应不成功时，例如500响应的情况

以下示例是表单中的一个示例。当用户提交表单时，它应该发出一个PUT

如果满足PUT响应，则应重置表单。否则什么也不会发生，用户应该可以重试

/MyForm.jsx

从“React”导入React；
从“道具类型”导入道具类型；
从“react-refetch”导入{PromiseState}；
从“Formik”导入{Formik，Form，Field，ErrorMessage}；
从“/ResetOnSuccess”导入ResetOnSuccess；
常量MyForm=（{settingsPut，settingsPutResponse}）=>{
常量submitForm=（值，formik）=>{
设置SPUT（真）；
//在这里，它应该获取设置SPUTResponse，
//然后，仅在成功的情况下执行以下操作：
//
//resetForm（{values}）；
//滚动到（0，0）；
};
返回(
{（{dirty}）=>(
提交
{settingsPutResponse&&settingsPutResponse.rejected&&(
请重试
)}
)}
);
};
MyForm.propTypes={
设置提示：需要PropTypes.func，
设置响应：PropTypes.instanceOf（PromiseState）
};
MyForm.defaultProps={
userSettingsPutResponse:null
};
导出默认MyForm；

通过创建一个组件，我可能有一个解决方案：

/ResetOnSuccess.jsx

import React，{useffect，useState}来自“React”；
从“formik”导入{useFormikContext}；
从“道具类型”导入道具类型；
从“react-refetch”导入{PromiseState}；
const ResetOnSuccess=（{settingsPutResponse}）=>{
常量{values，resetForm}=useformicContext（）；
const[success，setSuccess]=使用状态（false）；
useffect（（）=>{
如果（设置SPUTResponse&&settingsPutResponse.Completed）{
设置成功（true）；
}
}，[settingsPutResponse]）；
//只有满足settingsPutResponse后，才会重置表单
如果（成功）{
resetForm（{values}）；
滚动到（0，0）；
设置成功（假）；
}
返回null；
};
ResetOnSuccess.propTypes={settingsPutResponse:propTypes.instanceOf（PromiseState）}；
ResetOnSuccess.defaultProps={settingsPutResponse:null}；
导出默认重置成功；

然后在/MyForm.jsx中添加重置组件：

{（{dirty}）=>(
//等等。。。

但由于它是一个返回“null”的组件，这感觉有点像反模式

有更好的办法吗

---

我在这里创建了一个代码沙盒示例：

使用组件生命周期方法getDerivedStateFromProps。它在组件收到新的props后调用。示例：-静态getDerivedStateFromProps（nextProps，prevState）{if（nextProps.someValue！==prevState.someValue）{return{someState:nextProps.someValue}；}else return null；}getDerivedStateFromProps生命周期方法只能在类组件中使用。在函数组件中，这将在useEffect中处理，对吗？是的@Remi，我错过了。