Reactjs 如何将我的错误消息从axios调用的服务器传递到我的组件

我真的是个新手。我的操作中有一个axios请求我希望我的错误消息传递到组件上我有以下代码：

    import axios from 'axios';
    import setAuthorizationToken from '../utils/setAuthorizationToken';
    import jwtDecode from 'jwt-decode';
    import { SET_CURRENT_USER, BASE_URL } from './types';

    const instance = axios.create({
      baseURL: BASE_URL
    });

    export function setCurrentUser(user) {
      return {
        type: SET_CURRENT_USER,
        user
      };
    }

    export function logout() {
      return dispatch => {
        localStorage.removeItem('accessToken');
        localStorage.removeItem('refreshToken');
        setAuthorizationToken(false);
        dispatch(setCurrentUser({}));
      }
    }

    export function login(data) {
      return dispatch => {
        return instance.post('/authenticate', data).then(function(response) {
          const token = response.data.accessToken;
          const refreshToken = response.data.refreshToken;
          localStorage.setItem('accessToken', token);
          localStorage.setItem('refreshToken', refreshToken);
          setAuthorizationToken(token);
          dispatch(setCurrentUser(jwtDecode(token)));
        })
        .catch(function(error){
          console.log('error: ', error.response.data);
        });
      }
    }

以下是我的组件：

    import React from 'react';
    import TextFieldGroup from '../common/TextFieldGroup';
    import validateInput from '../../server/validations/login';
    import { connect } from 'react-redux';
    import { login } from '../../actions/authActions';

    class LoginForm extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          username: '',
          password: '',
          errors: {},
          isLoading: false
        };

        this.onSubmit = this.onSubmit.bind(this);
        this.onChange = this.onChange.bind(this);
      }

      isValid() {
        const { errors, isValid } = validateInput(this.state);

        if (!isValid) {
          this.setState({ errors });
        }

        return isValid;
      }

      onSubmit(e) {
        e.preventDefault();
        if (this.isValid()) {
          this.setState({ errors: {}, isLoading: true });
          this.props.login(this.state).then(
            (res) => this.context.router.push('/'),
            (error) => this.setState({ errors: error.response.data , isLoading: false }),
          );

        }


      }

      onChange(e) {
        this.setState({ [e.target.name]: e.target.value });
      }

      render() {
        const { errors, username, password, isLoading } = this.state;

        return (
          <form onSubmit={this.onSubmit}>
            <h1>Login</h1>

            { errors.message && <div className="alert alert-danger">{errors.message}</div> }

            <TextFieldGroup
              field="username"
              label="Username"
              value={username}
              error={errors.username}
              onChange={this.onChange}
            />

            <TextFieldGroup
              field="password"
              label="Password"
              value={password}
              error={errors.password}
              onChange={this.onChange}
              type="password"
            />

            <div className="form-group"><button className="btn btn-primary btn-lg" disabled={isLoading}>Login</button></div>
          </form>
        );
      }
    }

    LoginForm.propTypes = {
      login: React.PropTypes.func.isRequired
    }

    LoginForm.contextTypes = {
      router: React.PropTypes.object.isRequired
    }

    export default connect(null, { login })(LoginForm);

从“React”导入React；
从“../common/TextFieldGroup”导入TextFieldGroup；
从“../../server/validations/login”导入validateInput；
从'react redux'导入{connect}；
从“../../actions/authActions”导入{login}；
类LoginForm扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户名：“”，
密码：“”，
错误：{}，
孤岛加载：false
};
this.onSubmit=this.onSubmit.bind（this）；
this.onChange=this.onChange.bind（this）；
}
isValid（）{
const{errors，isValid}=validateInput（this.state）；
如果（！isValid）{
this.setState（{errors}）；
}
返回有效；
}
提交（e）{
e、 预防默认值（）；
if（this.isValid（））{
this.setState（{errors:{}，isLoading:true}）；
this.props.login（this.state）。然后(
（res）=>this.context.router.push（'/'），
（error）=>this.setState（{errors:error.response.data，isLoading:false}），
);
}
}
onChange（e）{
this.setState（{[e.target.name]：e.target.value}）；
}
render（）{
const{errors，username，password，isLoading}=this.state；
返回(
登录
{errors.message&&{errors.message}
登录
);
}
}
LoginForm.propTypes={
登录名：React.PropTypes.func.isRequired
}
LoginForm.contextTypes={
路由器：React.PropTypes.object.isRequired
}
导出默认连接（null，{login}）（LoginForm）；

这是console.log

错误：对象{代码：“未经授权”，消息：“无效用户名或密码”。}

---

目前我不知道如何将错误消息传递给组件。我对React和Redux非常陌生，首先你必须在reducer上添加初始状态。比如说

authReducer.js

const initialState = {
  ... // another state
  errors: {}
}

function yourReducer(state = initialState, action) {
  case 'SHOW_ERROR':
    return {
      ...state,
      errors: action.message
    }
  default:
    return state
}

export function login(data) {
  return dispatch => {
    return instance.post('/authenticate', data).then(function(response) {
      ...
      // success
    })
    .catch(function(error){
    // fail
      dispatch({ type: 'SHOW_ERROR', message: error.response.data })
    });
  }
}

function mapStateToProps(state) {
  return {
    you: may.return.another.state.here,
    errors: state.yourReducerName.errors
  }
}

export default connect(mapStateToProps, { login })(LoginForm);

登录操作时发送“显示错误”

authoctions.js

const initialState = {
  ... // another state
  errors: {}
}

function yourReducer(state = initialState, action) {
  case 'SHOW_ERROR':
    return {
      ...state,
      errors: action.message
    }
  default:
    return state
}

export function login(data) {
  return dispatch => {
    return instance.post('/authenticate', data).then(function(response) {
      ...
      // success
    })
    .catch(function(error){
    // fail
      dispatch({ type: 'SHOW_ERROR', message: error.response.data })
    });
  }
}

function mapStateToProps(state) {
  return {
    you: may.return.another.state.here,
    errors: state.yourReducerName.errors
  }
}

export default connect(mapStateToProps, { login })(LoginForm);

然后，您需要将redux状态映射为组件上的道具

LoginComponent.js

const initialState = {
  ... // another state
  errors: {}
}

function yourReducer(state = initialState, action) {
  case 'SHOW_ERROR':
    return {
      ...state,
      errors: action.message
    }
  default:
    return state
}

export function login(data) {
  return dispatch => {
    return instance.post('/authenticate', data).then(function(response) {
      ...
      // success
    })
    .catch(function(error){
    // fail
      dispatch({ type: 'SHOW_ERROR', message: error.response.data })
    });
  }
}

function mapStateToProps(state) {
  return {
    you: may.return.another.state.here,
    errors: state.yourReducerName.errors
  }
}

export default connect(mapStateToProps, { login })(LoginForm);

最后，您可以调用

errors

，作为组件上的道具

class LoginForm extends React.Component {
  ...
  render() {
    const { errors, username, password, isLoading } = this.state;
    const { errors } = this.props // errors from redux state

    return (
      <form onSubmit={this.onSubmit}>
        <p>{errors.message}</p>
        <h1>Login</h1>
        ...
        <div className="form-group"><button className="btn btn-primary btn-lg" disabled={isLoading}>Login</button></div>
      </form>
    );
  }
}

类LoginForm扩展了React.Component{
...
render（）{
const{errors，username，password，isLoading}=this.state；
const{errors}=this.props//redux状态的错误
返回(
{errors.message}

登录
...
登录
);
}
}

---

别忘了验证道具类型。祝你好运

谢谢你的详细评论。非常感谢。

函数mapStateToProps（state）{return{errors:state.authReducer.errors}；}

在某个时候，已经从“../../reducers/auth”导入了我的reducer

导入{authReducer}

TypeError:无法读取未定义的属性“errors”

请检查您的

combinereducer（）

，是否有任何名为

authReducer

的reducer？或者为了便于调试，您可以在

MapStateTrops（）中
console.log（state）
。你会知道你注册的所有减速器。