Javascript 当状态更改时，React警报库似乎不会重新呈现_Javascript_Reactjs_Redux_React Redux_Axios

Javascript 当状态更改时，React警报库似乎不会重新呈现

javascript reactjs redux

Javascript 当状态更改时，React警报库似乎不会重新呈现,javascript,reactjs,redux,react-redux,axios,Javascript,Reactjs,Redux,React Redux,Axios,因此，我尝试使用名为react alert的库进行错误处理我使用Axios作为我的REST处理程序。我创建了一个action和一个reducer，它们都工作得很好；当我发出post请求时，在我的DevTools扩展中看到我的状态更新这是我的功能组件Alert.js import React, { Fragment, useState } from "react"; import { useAlert } from "react-alert"; impo

因此，我尝试使用名为react alert的库进行错误处理

我使用Axios作为我的REST处理程序。我创建了一个action和一个reducer，它们都工作得很好；当我发出post请求时，在我的DevTools扩展中看到我的状态更新

这是我的功能组件Alert.js

import React, { Fragment, useState } from "react";
import { useAlert } from "react-alert";
import { useSelector } from "react-redux";
import { useEffect } from "react";

export default function Alert(props) {
  const alert = useAlert();
  const error = useSelector((state) => state.errors.errors);

  const [errorMSG, setERRORS] = useState();

  useEffect(() => {
    if (error !== errorMSG) {
      setERRORS(error);
      alert.show(errorMSG);
    } else {
      alert.show("Welcome!");
    }
  }, [errorMSG]);

  return <Fragment />;

import React，{Fragment，useState}来自“React”；
从“react alert”导入{useAlert}；
从“react redux”导入{useSelector}；
从“react”导入{useffect}；
导出默认功能警报（道具）{
const alert=useAlert（）；
const error=useSelector（（state）=>state.errors.errors）；
const[errorMSG，setERRORS]=useState（）；
useffect（（）=>{
如果（错误！==errorMSG）{
设置错误（错误）；
显示（errorMSG）；
}否则{
警惕。显示（“欢迎！”）；
}
}，[errorMSG]）；
返回；

然后我在我的主App.js中调用了它

//Main Imports
import React, { Component, Fragment } from "react";
import ReactDOM from "react-dom";

// React Alert

import { Provider as AlertProvider } from "react-alert";
import AlertTemplate from "react-alert-template-basic";
import Alert from "./layout/Alert";

const alertOptions = {
  timeout: 3000,
  position: "top center",
};

//Components import
import Header from "./layout/Header";
import Dashboard from "./products/Dashboard";

//Redux import
import { Provider } from "react-redux";
import store from "../store";

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <AlertProvider template={AlertTemplate} {...alertOptions}>
          <Alert />
          <Fragment>
            <Header />
            <div className="container-fluid">
              <Dashboard />
            </div>
          </Fragment>
        </AlertProvider>
      </Provider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

//主要导入
从“React”导入React，{Component，Fragment}；
从“react dom”导入react dom；
//反应警报
从“react alert”导入{Provider as AlertProvider}；
从“react alert template basic”导入AlertTemplate；
从“/layout/Alert”导入警报；
常量警报选项={
超时：3000，
位置：“上中锋”，
};
//组件导入
从“/layout/Header”导入标题；
从“/products/Dashboard”导入仪表板；
//重复输入
从“react redux”导入{Provider}；
从“./store”导入存储；
类应用程序扩展组件{
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（“app”）；

我确实看到了欢迎！当应用程序挂载时，但当我出现错误时，我什么也看不到。谁能帮我找到解决方案，我将不胜感激。

您看到“欢迎”因为当您的组件第一次装载时，它会调用

useffect

钩子。但是

useffect

钩子不会在之后被触发，因为为

useffect

提供了错误的依赖项。您需要添加

error

而不是

errorMSG

，因为

error

来自您的

存储

，当出现新的

错误

时，您希望显示该消息：

 useEffect(() => {
    if (error !== errorMSG) {
      setERRORS(error);
      alert.show(errorMSG);
    } else {
      alert.show("Welcome!");
    }
  }, [error]);

你看到“欢迎”因为当您的组件第一次装载时，它会调用

useffect