Невозможно вызвать функцию setState в onSubmit Formik - PullRequest
Новая
       9

Невозможно вызвать функцию setState в onSubmit Formik

0 голосов
/ 10 февраля 2020

Я пытаюсь добавить оповещение каждый раз, когда отправляю свою форму. Я пытался передать свое состояние в качестве опоры моему компоненту, но это не сработало.

Вот мое состояние класса: 

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);
                    }
                )

А вот мой компонент Alert: 

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? Это вообще возможно? Я пытался создать отдельную функцию обработчика отправки, но это тоже не сработало.

Ответы [ 2 ]

1 голос
/ 10 февраля 2020

Я нашел решение своей проблемы. Я поделюсь этим, если есть новички, которые столкнутся с той же проблемой.

Я создал переменную для хранения экземпляра this класса точно так же, как сказал @ Hari sh 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 prop в компоненте render 

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;
}

Спасибо @ Hari sh Soni за помощь.

1 голос
/ 10 февраля 2020

У вас нет 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;
}
...