React本机还原数据未发送到我的页面

Question

我有一个正在发送给还原器的操作数据，而不是我的页面构造函数。

动作方法：

export const getTenantByID = ({ tenantID }) => {
  return (dispatch) => {
    const getTenant = {
      FirstName: 'Jonh', LastName: 'Doe', Email: '[e-mail]', Phone: 'xxx-xxx-xxxx',
      Unit: '101', MiddleName: '',
    };
    dispatch({
      type: GET_TENANT_DATA,
      payload: getTenant
    });
  };
};

然后，在我的还原器中

const INITIAL_STATE = {
  error: false,
  data: [],
  tenantData: {},
};
export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case GET_TENANTS_DATA:
      return { ...state, error: false, data: action.payload };
    case GET_TENANT_DATA:
        return { ...state, error: false, tenantData: action.payload };
    default:
      return state;
  }
};

如果我在案件之后执行console.log(action(，我可以看到有效载荷的数据，因此它在还原器中工作。

我的页面：

constructor(props) {
    super(props);
    const { navigation } = this.props;
    const tenantID = navigation.getParam('tenantID', '0');
    this.props.getTenantByID(tenantID);
      console.log(this.props); // this show tenantData as a empty object
    this.state = {
      tenantData: this.props.tenantData
    };
  } 
  ...
const mapStateToProps = ({ tenants }) => {
  const { error, tenantData } = tenants;
  return { error, tenantData };
};
export default connect(mapStateToProps, {
  getTenantByID
})(TenantDetails);

Answer 1

似乎您正在使用thunk，并且是异步的，因此您需要await您的操作，以便在启动操作后可以获得更新的状态。否则，如果没有必要，则可以删除thunk。您可能需要在componentDidMount中发射动作，而不是构造函数

componentDidMount() {
   this.getTenant();
}
getTenant = async () => {
    const { navigation } = this.props;
    const tenantID = navigation.getParam('tenantID', '0');
    await this.props.getTenantByID(tenantID); // Wait for action to complete
    console.log(this.props); // Get updated props here
    this.state = {
      tenantData: this.props.tenantData
    };
}
const mapStateToProps = ({ tenants }) => {
  const { error, tenantData } = tenants;
  return { error, tenantData };
};
export default connect(mapStateToProps, {
  getTenantByID
})(TenantDetails);

或者您可以通过componentDidUpdate

捕获更新

componentDidMount() {
   this.getTenant();
}
componentDidUpdate(previousProps) {
    if (this.props.tenantData !== previousProps.tenantData) {
       console.log(this.props); // Get updated props here
       this.state = {
          tenantData: this.props.tenantData
       };
    }
}
getTenant = async () => {
    const { navigation } = this.props;
    const tenantID = navigation.getParam('tenantID', '0');
    this.props.getTenantByID(tenantID);
}
const mapStateToProps = ({ tenants }) => {
  const { error, tenantData } = tenants;
  return { error, tenantData };
};
export default connect(mapStateToProps, {
  getTenantByID
})(TenantDetails);