React中.props为undefined问题咨询附Posts组件Redux相关代码

嘿，我来帮你排查这个props为undefined的问题！结合你给出的代码片段，我整理了几个最常见的原因和对应的解决办法：

1. 组件未连接Redux Store #

这是最常见的原因——你的Posts组件还没有通过Redux的connect高阶函数和Store建立连接，所以自然拿不到Redux相关的props。

解决办法： #

在Posts组件文件中导入connect，并添加mapStateToProps函数，最后用connect包裹组件后导出：

import React, { Component } from 'react';
import { connect } from 'react-redux'; // 导入connect

class Posts extends Component {
  constructor(props){ // 这里后面会说为什么要加props
    super(props);
    this.state = { /* 你的状态定义 */ };
  }

  // 组件其他逻辑...
}

// 映射Redux状态到组件props
const mapStateToProps = state => ({
  posts: state.posts, // 对应你combineReducers里定义的posts字段
  // 如果你需要单独取items、item等，可以在这里解构：
  // postsItems: state.posts.items,
  // selectedJob: state.posts.selectedJob
});

// 用connect包裹组件后导出
export default connect(mapStateToProps)(Posts);

2. 构造函数未传递props给super #

你的组件构造函数写的是：

constructor(){
  super();
  // ...
}

这种情况下，在构造函数内部访问this.props会是undefined（虽然组件挂载后props会正常传入，但构造函数里拿不到）。

解决办法： #

把props传递给constructor和super：

constructor(props){
  super(props);
  // 现在这里可以正常访问this.props了
  this.state = { /* 你的状态定义 */ };
}

3. 确认Redux Store已正确注入应用 #

还要确保你的React应用根组件已经用Provider包裹了Redux Store，否则所有组件都拿不到Redux的props。比如在index.js里：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store'; // 你的Redux Store配置文件
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

按照上面的步骤检查一遍，应该就能解决props为undefined的问题啦！

内容的提问来源于stack exchange，提问作者zennn