Redux搭配thunk请求后reducer存储结果慢、返回undefined问题求助

问题排查及修复方案 #

1. 组件渲染判断逻辑错误

你在render里判断的是组件内部this.state.data的长度，但你从来没有更新过这个内部state，它初始值是空数组，所以this.state.data?.length >=2的判断永远为假，标记*4的代码永远不会执行。

你不需要额外维护组件内部的state存储成员列表，直接用从redux映射过来的props即可。

2. mapStateToProps取值错误

你调用combineReducers后，redux的全局state结构为：

{
  memberList: members reducer返回的结果, // 就是你存的成员列表数据
  members: 你导入的另一个reducer返回的结果
}

而你当前的mapStateToProps直接把整个state对象赋值给membersList，没有取到对应的字段，正确写法应该是：

let mapStateToProps = function(state){
  return ({
    membersList: state.memberList // 直接取combineReducers里定义的memberList字段
  })
}

3. 多余的reducer引用风险

你在combineReducers里导入的import reducer from './reducer'如果没有正确定义、没有返回初始值的话，会导致对应state字段返回undefined，如果你没有用到这个reducer，建议直接删掉，简化后的combineReducers代码：

import { combineReducers } from 'redux';
import members from './member';

export default combineReducers({
    memberList: members
});

4. 渲染逻辑修改

把判断条件改成用redux映射过来的props，你就可以看到数据了：

render() {
  console.log('当前props的成员列表：', this.props.membersList) 
  return (
    <div className="App">
      {
        this.props.membersList?.length >= 2 ? (
          this.props.membersList.map(item => <Member data={item} />)
          // 这里写你要渲染的逻辑
        ) : <div>加载中...</div>
      }
    </div>
  );
}

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