如何从 react 的 componentDIdMount() 中访问 redux-store [英] How to access redux-store from within react's componentDIdMount()

问题描述

在下面的代码中，我试图将 state.userData.userDetails 从 redux-store 传递到 getleftpaneProductCatalogue()，但是state.userData.userDetails 不能被 componentDidMount() 访问.我尝试将 state.userData.userDetails 分配给 this.prop.userProfile，但仍然 this.prop.userProfile 是一个空值.如何在componentDidMount中访问prop?

import React,{Component} from 'react';从'react-redux'导入{连接}；从'react-materialize'导入{行，列}；从'../actions/leftpane-actions'导入{getleftpaneProductCatalogue}；从'../components/pages/product-catalogue-leftpane'导入ProductCatalogueLeftPaneComp；类 ProductCatalogueLeftPane 扩展组件 {构造函数(道具){超级(道具)}componentDidMount() {console.log('this.props^', JSON.stringify(this.props));this.props.getleftpaneProductCatalogue().then((data) => {console.log('productdata', 数据);})}使成为() {返回 (<div>{JSON.stringify(this.props.userProfile)}

)}}const mapStateToProps = (状态) =>{console.log('state^', JSON.stringify(state));返回 {leftpaneProductCatalogue: state.leftpaneProductCatalogue, userProfile: state.userData.userDetails};};const mapDispatchToProps = (调度) =>{返回 {getleftpaneProductCatalog: () =>调度(获取左窗格产品目录())，};};导出默认连接(mapStateToProps，mapDispatchToProps)(ProductCatalogueLeftPane)；

解决方案

可以直接在mapDispatchToProps中访问状态并传递给getleftpaneProductCatalogue:

componentDidMount() {const { dispatch, getleftpaneProductCatalogue }调度(获取左窗格产品目录())}const mapDispatchToProps = dispatch =>{返回 {getleftpaneProductCatalog: () =>(调度，getState) =>{const 状态 = getState()const 详细信息 = state.userData.userDetails返回调度(获取左窗格产品目录(详细信息))},派遣}}

但是，按照您的做法，通过 mapStateToProps 传递状态仍然有效，但更加冗长.因此，问题可能出在其他地方.

这是我的赌注.我猜您是通过异步 API 调用在代码中的某处获取 userData 并且尚未获取它.如果是这种情况 - 那么您应该首先等待数据被获取，然后您可以在您的组件 ProductCatalogueLeftPane 中访问它.

In the following code I am trying to pass the state.userData.userDetails from the redux-store to getleftpaneProductCatalogue(), but state.userData.userDetails is unaccessible to componentDidMount(). I tried assigning the state.userData.userDetails to this.prop.userProfile, but still this.prop.userProfile is an empty value. How to access the prop within componentDidMount?

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);

解决方案

You can access the state directly in mapDispatchToProps and pass it to getleftpaneProductCatalogue:

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
  }
}

However, the way you're doing it, passing the state via mapStateToProps is still valid, but more verbose. Therefore the problem would be somewhere else.

Here's my bet. I guess you're getting the userData somewhere in your code with async API call and it's not being fetched yet. If that's the case - then you should wait for data being fetched firstly, then you can access it in your component ProductCatalogueLeftPane.

这篇关于如何从 react 的 componentDIdMount() 中访问 redux-store的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！