React-Redux中getState()返回undefined问题排查求助

我编写了以下Redux action creator代码：

export const SMSAdmin_Filter_User = (userName) => (dispatch, getState) => {
    var st = getState();
    ...
}

运行时调试器显示getState()是已定义的函数，但执行后变量st却为undefined。我在其他多个action creator中成功使用过getState，不清楚此处失效的原因。

该action以Promise形式调用，因为存在大量用户增量获取的异步逻辑，调用位置代码如下：

componentDidMount() {
        var el = document.getElementById("userList");
        if (el) {
            el.focus({ preventScroll: true });
        }
        // console.log("SMSAdmin")
        new Promise((res,rej)=>this.props.SMSAdmin_Get_Users());
        // .then(() => {
        //     this.setState({ users: this.props.SMSAdmin.users });
        // });
    }

    filterUsers = () => {
        let target = document.getElementById("userName");
        let name = target?.value?.toLowerCase();
        new Promise((res, rej)=>SMSAdmin_Filter_User(name?.trim()));
    }

filterUsers()还会在render函数中调用，以确保SMSAdmin_Get_Users()新增用户时列表能同步更新。

我的mapDispatchToProps代码：

const mapDispatchToProps = (dispatch) => {
    return {
        SMSAdmin_Get_Users: () => { return dispatch(SMSAdmin_Get_Users()) },
        SMSAdmin_Load_User: (userId, userName, oldData = null, startVal = 0, number = 20) => {
            return dispatch(SMSAdmin_Load_User(userId, userName, oldData, startVal, number))
        },
        SMSAdmin_Update_User: (user, province, credits) => { return dispatch(SMSAdmin_Update_User(user, province, credits)) },
        SMSAdmin_setCurrentUpload: (userName) => { return dispatch(SMSAdmin_setCurrentUpload(userName)) },
        SMSAdmin_Filter_User: (userName) => { return dispatch(SMSAdmin_Filter_User(userName)) },
    }
}

Redux store创建代码：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import { reducers } from './reducerMain.js';

export const ConfigureStore = () => {

    const store = createStore(
        reducers,
        applyMiddleware(thunk, logger)
    );

    return store;
}

因涉及多个关联文件及保密数据，无法提供在线沙箱。

核心问题：未通过绑定后的props调用action #

你在filterUsers中直接调用了原始的SMSAdmin_Filter_User函数，而非this.props.SMSAdmin_Filter_User。只有经过mapDispatchToProps包装、通过props调用的action，才会被redux-thunk中间件处理，让getState正确绑定到Redux store，从而获取到状态值。

1. 修正filterUsers的调用方式 #

filterUsers = () => {
    let target = document.getElementById("userName");
    let name = target?.value?.toLowerCase();
    // 改用props中绑定好的方法调用action
    this.props.SMSAdmin_Filter_User(name?.trim());
}

2. 移除不必要的Promise包装 #

你手动用new Promise包裹action调用的写法既多余又错误——Promise回调内未调用res或rej，会导致Promise一直处于pending状态。如果你的thunk action本身是异步逻辑，只需让action creator返回Promise即可，无需手动包装：

componentDidMount() {
    var el = document.getElementById("userList");
    if (el) {
        el.focus({ preventScroll: true });
    }
    // 直接调用props中的方法，若action返回Promise可直接链式调用then
    this.props.SMSAdmin_Get_Users()
    .then(() => {
        this.setState({ users: this.props.SMSAdmin.users });
    });
}

3. 禁止在render中调用filterUsers #

render函数仅负责UI渲染，在此处调用filterUsers会导致每次渲染都触发action，可能引发无限循环或不必要的状态更新。正确的做法是在数据更新时触发过滤逻辑，比如通过componentDidUpdate监听props变化：

componentDidUpdate(prevProps) {
    // 当用户列表数据变化时，重新执行过滤
    if (prevProps.SMSAdmin.users !== this.props.SMSAdmin.users) {
        this.filterUsers();
    }
}

完成以上调整后，getState()就能正确获取到Redux store的状态，st也不会再是undefined。

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