Formik的onSubmit中不能调用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中没有instance of the Current Class inside the fecth的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 Soni 帮助我。