javascript - 组件中的空状态(react redux)

Question

我的组件中的状态有问题。我正在尝试从我的 reducer 获取状态，但 state 为空，只是得到 undefined

这是我的actionCreator

export function checkLogin() {
return function(dispatch){
    return sessionApi.authCheck().then(response => {
        dispatch(authSuccess(true)); 
    }).catch(error => {
        throw(error)
    })
 }
}

我的 reducer

export const authStatus = (state = {}, action) => {
switch(action.type){
    case AUTH_FALSE:
            return{
                status: action.status
            }
    case AUTH_TRUE:
            return {
                ...state,
                status: action.status
            };
    default:
        return state;
  }
};

这是我试图获取状态的组件

const mapStateToProps = (state) => {
 return {
 status: state.status
  }
};

const mapDispatchToProps = (dispatch:any) => {
  const changeLanguage = (lang:string) => dispatch(setLocale(lang));
  const checkAuth = () => dispatch(checkLogin());
  return { changeLanguage, checkAuth }
};

@connect(mapStateToProps, mapDispatchToProps)

我需要从州获取状态

组件

import * as React from "react";
import  Navigation  from './components/navigation';
import { connect } from 'react-redux';
import { setLocale } from 'react-redux-i18n';
import cookie from 'react-cookie';
import {checkLogin} from "./redux/actions/sessionActions";

class App extends React.Component<any, any> {
  constructor(props:any) {
    super(props);
    this.state = {
      path: this.props.location.pathname
    };
  }
  componentDidMount(){
    this.props.checkAuth();
    this.props.changeLanguage(cookie.load('lang'));
  }
  componentWillUpdate(){
  }

  render() {
    return (
      <div>
        <Navigation path={this.state.path} />
          {this.props.children}
      </div>
    )
  }

}
const mapStateToProps = (state) => {
  return {
    status: state.status
  }
};

const mapDispatchToProps = (dispatch:any) => {
  const changeLanguage = (lang:string) => dispatch(setLocale(lang));
  const checkAuth = () => dispatch(checkLogin());
  return { changeLanguage, checkAuth }
};

@connect(mapStateToProps, mapDispatchToProps)
export class Myapp
extends App {}

Answer 1

您无法访问构造函数内部异步的 Prop 。由于构造函数只会在实例化组件时执行一次。当您实例化组件时，您的异步调用尚未响应，因此 this.props.status 未定义。

您可以使用 React 生命周期方法中的 componentWillReceiveProps 例如:

componentWillReceiveProps(nextProps) {
  console.log(nextProps.status);
}

每当连接或传递到组件的 prop 发生变化时，都会执行此方法。您还可以在渲染器内部使用 this.props.status ，因为每次 prop 更改时都会执行此操作。

为了更好地理解 React 生命周期，您可以查看可用的不同方法，此处:https://facebook.github.io/react/docs/react-component.html