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 Soni帮助我。

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

2 个答案: