无法在 onSubmit of Formik 中调用 setState 函数

Question

我每次提交表单时都会尝试添加警报。我试图将我的状态作为道具传递给我的组件，但这似乎不起作用。

这是我的类状态：

this.state = {
alert_variant: '',
alert_heading: '',
alert_body: '',
alert_show: false
};

以下是我呈现警报的方式：

<ReactAlert 
show={this.state.alert_show}
variant={this.state.alert_variant} 
heading={this.state.alert_heading} 
body={this.state.alert_body} 
/>

这是我在 Formik 中的提交处理程序的一部分，它将值发送到 API：

onSubmit={(
values, 
{
setSubmitting, 
resetForm
}) =>{
fetch("url.com", {
method: 'POST',
mode: 'cors',
body: JSON.stringify(values, null, 2)
}
)
.then(res => res.json())
.then(
(result) => {
console.log(result)
setSubmitting(false)
resetForm(values)
this.setState({
alert_show: true,
alert_variant: 'success',
alert_heading: 'Sample Header',
alert_body: 'Sample body.'
});
},
(error, result) => {
this.setState({
error
});
console.log(this.state.error);
setSubmitting(false);
}
)

这是我的警报组件：

function ReactAlert(props){
const [show, setShow] = useState(false);
if (show) {
return(
<Bs.Alert variant={props.variant} onClose={() => setShow(false)} dismissible>
<Bs.Alert.Heading>{props.heading}</Bs.Alert.Heading>
<p>
{props.body}
</p>
</Bs.Alert>
);
}
return null;
}

现在如何在 Formik 的提交处理程序中更改我的状态变量？这可能吗？我试图创建一个单独的提交处理程序函数，但这也不起作用。

Answer 1

您没有instance of the Current Class inside the fecth，因为它会创建一个新对象，该对象的作用范围直到最后。

因此，如果您想在另一个类中调用setState，这里是：

onSubmit={(
values,
{
setSubmitting,
resetForm
}) => {
// GET THE CURRENT CLASS INSTANCE:
const that = this;
fetch("url.com", {
method: 'POST',
mode: 'cors',
body: JSON.stringify(values, null, 2)
}
)
.then(res => res.json())
.then(
(result) => {
console.log(result)
setSubmitting(false)
resetForm(values)
//CALL SETSTATE ON THAT
that.setState({
alert_show: true,
alert_variant: 'success',
alert_heading: 'Sample Header',
alert_body: 'Sample body.'
});
},
(error, result) => {
//CALL SETSTATE ON THAT
that.setState({
error
});
console.log(that.state.error);
setSubmitting(false);
}
)
}

更新： 对于警报一

function ReactAlert(props){
const [show, setShow] = useState(false);
if (props.show || props.alert_show) {
return(
<Bs.Alert variant={props.variant} onClose={() => setShow(false)} dismissible>
<Bs.Alert.Heading>{props.heading}</Bs.Alert.Heading>
<p>
{props.body}
</p>
</Bs.Alert>
);
}
return null;
}

Answer 2

我找到了解决问题的方法。如果有任何初学者会遇到同样的问题，我正在分享这个。

我创建了一个变量来存储类的this实例，就像@Harish Sonis在他的答案中所说的那样。我添加了一个函数，每次警报关闭时都会调用该函数。

我的职能：

alertClose(){
this.setState({
alert_show: false
});
}

新的警报渲染，我添加了onClose道具：

<ReactAlert 
display={this.state.alert_show}
variant={this.state.alert_variant} 
heading={this.state.alert_heading} 
body={this.state.alert_body} 
onClose={this.alertClose}
/>

我在组件渲染中调用了 onClose 道具

function ReactAlert(props){
if (props.display) {
return(
<Bs.Alert variant="success" onClose={() => props.onClose()} dismissible>
<Bs.Alert.Heading>hehe</Bs.Alert.Heading>
<p>
hehe    
</p>
</Bs.Alert>
);
}
return null;
}

感谢@Harish索尼帮助我。