在 react js 的 class 组件中添加 react-alert 并在 axios post 成功时显示警报

Question

我正在尝试在 class 反应 js 组件中添加反应警报，并在 axios post 成功时显示警报

但是我收到以下错误我该如何解决

Unhandled Rejection (TypeError): alert.show is not a function

import { withAlert } from "react-alert";

 componentWillMount() {
  
   handleCheckClick = (e, stateVal, index, alert) => {

    axios
      .patch("customer/", Data, {
        headers: headers,
      })
      .then(() => {
        alert.show("Oh look, an sucess!");
     
      })
      .catch((error) => {
              alert.show("Oh look, an error!");
      });

  
  };

  render() {
    const alert = this.props.alert;
    return (
   <div>hello</div>
    );
  }
}

Answer 1

看起来你在调用警报，但你没有在任何地方定义警报，因此你得到 alert.show 的原因不是函数。

试试这个：

import { useAlert } from 'react-alert'
...
const alert = useAlert();
alert.show('Look, an alert!')

更多信息在这里：https://www.npmjs.com/package/react-alert

Answer 2

确保用 Alert Provider 包裹你的 Root 组件。

对于基本模板：npm install --save react-alert react-alert-template-basic

import { transitions, positions, Provider as AlertProvider } from 'react-alert';
import AlertTemplate from 'react-alert-template-basic';

const Root = () => (
  <AlertProvider template={AlertTemplate} {...options}>
    <App />
  </AlertProvider>
)

在你的组件中..

import { withAlert } from 'react-alert';

class Medicine extends React.Component {
  handleCheckClick = (alert) => {
    axios
      .patch("customer/", Data, {
        headers: headers,
      })
      .then(() => {
        alert.show("Oh look, an sucess!");
      })
      .catch((error) => {
        alert.show("Oh look, an error!");
      });
  };

  render() {
    const alert = this.props.alert;

    return (
      <div onClick={() => this.handleCheckClick(alert)}>
        hello
      </div>
    );
  }
}

export default withAlert()(Medicine)

Answer 3

假设您像这样使用库提供的 HOC withAlert 包装导出的组件

export default withAlert()(//your component)

您应该可以访问来自 this.props

的警报

  handleCheckClick = () => {

    axios
      .patch("customer/", Data, {
        headers: headers,
      })
      .then(() => {
        this.props.alert.show("Oh look, an sucess!");
     
      })
      .catch((error) => {
              this.props.alert.show("Oh look, an error!");
      });

  
  };

在 react js 的 class 组件中添加 react-alert 并在 axios post 成功时显示警报

add react-alert in class compoent of reacts js and showing alert if axios post is sucess

reactjs

axios