首页 > 解决方案 > 如何通过 Axios Post 方法将成功消息传递给另一个组件

问题描述

当我通过 Axios POST 方法注册新用户时,我试图将成功消息传递给我的仪表板组件。我能够通过仪表板组件中的控制台日志传递我的用户数据,但是,我似乎无法正确设置状态并在成功注册时传递自定义成功消息。任何帮助都感激不尽。

我已经能够控制台记录 userData 对象,但我在设置状态和传递自定义消息方面没有成功。

***** 这是我将 axios 发布到 API 的代码,设置状态导致“未处理的拒绝(TypeError):无法在我的单独仪表板组件中读取未定义的属性“数据”。

    export const adminRegisterUser = (userData, history) => dispatch => {
      axios
       .post("/api/users/adminregister", userData)
       .then(res => {
          history.push("/dashboard")
          this.setState({ message: "Message sent successfully." });
       }) // Re-direct to dashboard on successful register and push a message confirming the registration.
        .catch(err =>
          dispatch({
          type: GET_ERRORS,
          payload: err.response.data
       })
      );
    };

***** 这是 Dashboard 组件代码,用于接收状态并显示成功消息。

     render() {
        return (
           <div style={{ width: "100%", backgroundColor: "#fff" }}className="valign-wrapper">
           <LoginNav />

           // Note that a console.log(userData) will output the userData here
           <div>{this.state.message}</div>
           <div className="row">
            <div className="col s6">
              <Chart />
            </div>
            <div className="col s6">
              <LineChart />
            </div>
           </div>
          </div>
        );
       }

标签: reactjsaxios

解决方案


推荐阅读