показывать в ответной реакции

Question

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

Как отобразить предупреждение в выборке

показать в выборке реагирования-предупреждения

IЯ использую компонент реагирования-оповещения. https://www.npmjs.com/package/react-alert

      async handleSubmitUpdate() {

        await fetch(`${this.domain}/api/debt/update/`, {
          method: "PUT",
          headers: {
            Authorization: `Bearer ${localStorage.getItem("token")}`,
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            user: this.props..id, 
          })
        })
          .then(response => {
            return response.json();
          })
          .then(json => {
            this.componentDidMount();

                return (<AlertMessageBox type={"success"} data={"Update succesfully"} />)
          })
          .catch(err => console.log(err));
      }

AlertMessageBox.js

    import React from 'react';
    import { useAlert } from 'react-alert';


    const AlertMessageBox = ({ type, data }) => {
        const alert = useAlert();

        console.log(data);

        const showAlert = () =>  {
            switch (type) {
                case 'error':
                    alert.error(<div style={{color: 'red'}}> data </div>);
                    return;
                case 'show':
                    alert.show(<div style={{color: 'white'}}> data </div>);
                    return;
                case 'info':
                    alert.success(<div style={{color: 'green'}}> data </div>);
                    return;
                default:
                    return;
            }
        };
        return <div> { showAlert() }  Deneme</div>;
    };

    export default AlertMessageBox;

Answer 1

Для этого у вас должна быть переменная состояния.

state = {
   showSuccessAlert: false,
   showFailAlert: false
}

Затем вы можете установить переменную состояния при успехе / неудаче,

await fetch(`${this.domain}/api/debt/update/`, {
  method: "PUT",
  headers: {
      Authorization: `Bearer ${localStorage.getItem("token")}`,
      "Content-Type": "application/json"
  },
  body: JSON.stringify({
      user: this.props..id,
  })
})
.then(response => {
  return response.json();
})
.then(json => {
  //this.componentDidMount();    //I don't think you can call this

  //Change the state here which will show your Alert
  this.setState({
    showSuccessAlert: true
  })
})
.catch(err => {
  console.log(err);

  //Change the state here which will show your Alert
  this.setState({
    showFailAlert: true
  })
);

В вашем методе рендеринга у вас должно быть предупреждениес условием

render(){
   return(
     <div>
        { this.state.showSuccessAlert && <AlertMessageBox type={"success"} data={"Update succesfully"} /> }

        { this.state.showFailAlert && <AlertMessageBox type={"error"} data={"Data update failed"} /> }

        ....
     </div>
   )
}