react-redux connect 提供未定义的道具

Posted 2023-04-14

【中文标题】react-redux connect 提供未定义的道具

【英文标题】：react-redux connect giving undefined props

【发布时间】：2018-11-12 14:33:33

【问题描述】：

我正在使用 react-redux 进行状态管理并使用 provider 传递状态存储，但我不知道为什么它在消费者部分未定义 我的提供者组件

  render()
    return (
        <Provider store = store >
            <ApolloProvider client = client >
                  <div className="row">
                        <SideBar />
                        <Center />
                        <RightSlidePanel />
                  </div>
          </ApolloProvider>
        </Provider>
    )
  

RightSLidePanel 组件

import  connect from  'react-redux'
 class RightSlidePanel extends React.Component
  constructor()
    super();
    console.log("inside connect " + this.props);
  
//render method here


const mapStateToProps = state => 
  return 
      loggedInUser : state.loggedInUser
    


const mapDepatchToProps = dispatch =>
  return 
    changeIsReduxWorking : answerTrueOrNot =>
            dispatch(
              type : "CHANGE_REDUX_WORKING_STATUS",
              data : answerTrueOrNot
            );
    
  

export default connect(
  mapStateToProps,
  mapDepatchToProps
)(RightSlidePanel);

console.log 的结果是 undefined。

【问题讨论】：

你能说明你是如何导入RightSlidePanel的吗？

@Sagiv 像这样：- import RightSlidePanel from './rightSlidePanel.js'

【参考方案1】：

您没有将 props 传递给 super，因为那里未定义 props。

constructor( props )
    super( props );
    console.log("inside connect " + this.props);
  

【讨论】：

成功了。现在可以访问调度和状态，但为什么在控制台中记录其即将到来的[object object]？

因为您将字符串与道具连接起来。这是故意的还是你想这样做：console.log("inside connect ", this.props);