Reactjs 如何从react'；s componentDIdMount（）

在下面的代码中，我试图将

state.userData.userDetails

从

redux存储区传递到
getLeftPaneProductCatalog（）
，但是
state.userData.userDetails
对于
componentDidMount（）
是不可访问的。我尝试将
state.userData.userDetails
分配给
this.prop.userProfile
，但
this.prop.userProfile
仍然是空值。如何访问
组件安装
中的
道具

import React,{Component} from 'react';
import { connect } from 'react-redux';
import {Row, Col } from 'react-materialize';
import {getleftpaneProductCatalogue} from '../actions/leftpane-actions';
import ProductCatalogueLeftPaneComp from '../components/pages/product-catalogue-leftpane';

class ProductCatalogueLeftPane extends Component {
    constructor(props) {
      super(props)

    }

    componentDidMount() {
      console.log('this.props^', JSON.stringify(this.props)); 
      this.props.getleftpaneProductCatalogue().then((data) => {
        console.log('productdata', data);
      })
    }

    render() {
      return (
        <div>
            {JSON.stringify(this.props.userProfile)}

       </div>
      )
    }

  }

  const mapStateToProps = (state) => {
    console.log('state^', JSON.stringify(state));
    return {leftpaneProductCatalogue: state.leftpaneProductCatalogue, userProfile: state.userData.userDetails};
  };

  const mapDispatchToProps = (dispatch) => {
    return {
      getleftpaneProductCatalogue: () => dispatch(getleftpaneProductCatalogue()),
    };
  };

  export default connect(mapStateToProps, mapDispatchToProps)(ProductCatalogueLeftPane);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“react materialize”导入{Row，Col}；
从“../actions/leftpane actions”导入{GetLeftPaneProductCatalog}；
从“../components/pages/product Catalog LeftPaneComp”导入ProductCatalogeleftpaneComp；
类ProductCatalogEleftPane扩展了组件{
建造师（道具）{
超级（道具）
}
componentDidMount（）{
log（'this.props^'，JSON.stringify（this.props））；
this.props.getLeftPaneProductCatalog（）。然后（（数据）=>{
console.log（'productdata'，data）；
})
}
render（）{
返回(
{JSON.stringify（this.props.userProfile）}
)
}
}
常量mapStateToProps=（状态）=>{
log（'state^'，JSON.stringify（state））；
返回{LeftPaneProductCatalog:state.LeftPaneProductCatalog，userProfile:state.userData.userDetails}；
};
const mapDispatchToProps=（调度）=>{
返回{
GetLeftPaneProductCatalog:（）=>dispatch（GetLeftPaneProductCatalog（）），
};
};
导出默认连接（MapStateTrops、mapDispatchToProps）（ProductCatalogEleftPane）；
您可以直接在
mapDispatchToProps
中访问状态，并将其传递给
GetLeftPaneProductCatalog
：

componentDidMount() {
  const { dispatch, getleftpaneProductCatalogue }

  dispatch(getleftpaneProductCatalogue())   
}

const mapDispatchToProps = dispatch => {
  return {
    getleftpaneProductCatalogue: () => (dispatch, getState) => {
      const state = getState()
      const details = state.userData.userDetails

      return dispatch(getleftpaneProductCatalogue(details))
    },
    dispatch
  }
}

但是，通过
mapstatetops
传递状态的方法仍然有效，但更详细。因此，问题将出现在其他地方

我打赌。我猜您通过异步API调用在代码中的某个地方获得了
userData
，但它还没有被获取。如果是这种情况，那么您应该先等待数据被提取，然后您可以在组件中访问它
productcatalogeleftpane
您可以直接在
mapDispatchToProps
中访问状态，并将其传递给
GetLeftPaneProductCatalog
：

componentDidMount() {
  const { dispatch, getleftpaneProductCatalogue }

  dispatch(getleftpaneProductCatalogue())   
}

const mapDispatchToProps = dispatch => {
  return {
    getleftpaneProductCatalogue: () => (dispatch, getState) => {
      const state = getState()
      const details = state.userData.userDetails

      return dispatch(getleftpaneProductCatalogue(details))
    },
    dispatch
  }
}

但是，通过
mapstatetops
传递状态的方法仍然有效，但更详细。因此，问题将出现在其他地方

我打赌。我猜您通过异步API调用在代码中的某个地方获得了
userData
，但它还没有被获取。如果是这样的话，那么您应该先等待数据被提取，然后您可以在组件
ProductCatalogeleftPane
中访问它，我正是按照您的猜测做的！在登录时，我将用户身份验证数据添加到redux存储中，但它是异步的，因此在安装主屏幕时存储尚未更新。酷！我很高兴知道你发现了错误并修复了它。我做的正是你猜到的！在登录时，我将用户身份验证数据添加到redux存储中，但它是异步的，因此在安装主屏幕时存储尚未更新。酷！我很高兴知道你发现了错误并修复了它。