将载荷值返回至Redux会话导致无限循环问题排查

看起来你已经摸清楚核心逻辑了——每次从数据库拿到计数结果、请求成功后，就把这个数值存到Redux状态里对吧？我来帮你把这个方案补全梳理清楚，让整个流程跑通：

组件中的状态触发逻辑 #

你给出的componentWillReceiveProps逻辑方向是对的，我帮你做了一点小优化，规范展示如下：

componentWillReceiveProps(nextProps) {
  const { countingTestAnnouncements, countingTestAnnouncementsSuccess, totalTests } = nextProps;
  // 当计数请求结束且成功时，触发Redux状态更新
  if (!countingTestAnnouncements && countingTestAnnouncementsSuccess) { 
    const value = parseInt(totalTests.total, 10); // 建议加上进制参数，避免解析意外
    this.props.setCurrentValue(value); // 注意要确保action已通过connect注入组件
  }
}

这段代码的核心是监听异步请求的状态变化：当请求不在进行中（!countingTestAnnouncements）且请求成功（countingTestAnnouncementsSuccess）时，解析出数据库返回的计数值，然后调用Redux action更新全局状态。

小提示：如果你的React版本比较新，componentWillReceiveProps已经是过时API啦，推荐换成static getDerivedStateFromProps（类组件）或者useEffect钩子（函数组件）来实现状态监听逻辑，避免后续版本的兼容性问题。

Redux Action 完整实现 #

你提到的SET_CURRENT_VALUE action可以按Redux最佳实践这样写：

// 定义action类型常量（避免拼写错误，方便后续复用）
export const SET_CURRENT_VALUE = "hp:set-current-value";

// action创建函数，用来生成更新状态的action对象
export const setCurrentValue = (value) => ({
  type: SET_CURRENT_VALUE,
  payload: value
});

Redux Reducer 处理逻辑 #

接下来需要在对应的reducer里处理这个action，把计数值存入Redux全局状态：

import { SET_CURRENT_VALUE } from "./your-action-file-path"; // 替换为你的action文件实际路径

// 初始状态，默认计数设为0
const initialState = {
  currentCount: 0
};

export const countReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_CURRENT_VALUE:
      // 浅拷贝原状态，更新计数字段（保持Redux状态不可变）
      return {
        ...state,
        currentCount: action.payload
      };
    default:
      // 非目标action时直接返回原状态
      return state;
  }
};

记得把这个reducer合并到你的根reducer中，这样整个应用的组件都能访问到这个计数状态。

组件中获取Redux存储的计数 #

如果需要在其他组件里使用这个存储的计数，可以用以下两种方式：

类组件（使用connect高阶组件） #

import { connect } from "react-redux";
import { setCurrentValue } from "./your-action-file-path";

class TestCountComponent extends React.Component {
  render() {
    return <div>当前测试公告计数：{this.props.currentCount}</div>;
  }
}

// 映射Redux状态到组件props
const mapStateToProps = (state) => ({
  currentCount: state.count.currentCount // 对应reducer在根状态中的路径，根据你的实际配置调整
});

// 映射action创建函数到组件props
const mapDispatchToProps = {
  setCurrentValue
};

// 用connect包裹组件，注入状态和action
export default connect(mapStateToProps, mapDispatchToProps)(TestCountComponent);

函数组件（使用useSelector和useDispatch钩子） #

import { useSelector, useDispatch } from "react-redux";
import { setCurrentValue } from "./your-action-file-path";

const TestCountComponent = () => {
  // 获取Redux中的计数状态
  const currentCount = useSelector(state => state.count.currentCount);
  // 获取dispatch方法
  const dispatch = useDispatch();

  // 如果需要手动触发更新，可以调用dispatch(setCurrentValue(newValue))
  return <div>当前测试公告计数：{currentCount}</div>;
};

export default TestCountComponent;

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