React 15中跨组件获取onClick触发的openModal更新值问题求助

1. 局部变量修改无法同步Redux状态：你在getOpenModal里的onAdd只是修改了局部变量openModal，完全没触发Redux的状态更新流程——Redux状态只能通过dispatch action + reducer处理来修改，直接改局部变量不会让store更新，自然也无法同步到Modifier组件。
2. 状态路径映射错误：Modifier组件里connect映射的是state.Attendance.Reports.columns，但你的reducer维护的是openModal字段，路径不匹配。
3. 状态类型混乱：reducer初始状态openModal是数组，但逻辑里你用的是布尔值，类型不统一会导致判断异常。
4. 缺少更新状态的action体系：没有定义专门用于修改openModal的action类型和action creator，无法触发状态更新。

步骤1：完善Redux的Action和Reducer #

修改Module.js，添加更新openModal的action和对应的reducer处理逻辑：

import React from "react";
import { connect } from "react-redux";

// 新增更新openModal的action类型
const INDEX_ATTENDANCE_REPORT_SUCCESS = "INDEX_ATTENDANCE_REPORT_SUCCESS";
const SET_OPEN_MODAL = "SET_OPEN_MODAL";

// 新增action creator，用于触发状态更新
export const setOpenModal = (isOpen) => ({
  type: SET_OPEN_MODAL,
  payload: isOpen
});

/**
 * 修改getOpenModal：传入dispatch，点击时触发action更新store
 * @param {Array} dataTable
 * @param {Function} dispatch
 * @return {JSX.Element|boolean}
 */
export function getOpenModal(dataTable, dispatch) {
  const column = { value: "Personnel ID" };

  if (column.value === "Personnel ID") {
    return (
      <a
        onClick={() => dispatch(setOpenModal(true))}
        style={{ color: "red", cursor: "pointer" }}
      >
        {dataTable?.text || "点击打开弹窗"}
      </a>
    );
  }
  return false;
}

// 修正reducer逻辑，处理SET_OPEN_MODAL action
export default function reducer(
  state = {
    openModal: false, // 初始值改为布尔值，和需求统一
  },
  action
) {
  switch (action.type) {
    case INDEX_ATTENDANCE_REPORT_SUCCESS:
      return {
        ...state,
        // 此处可根据需求初始化openModal，移除原错误的getOpenModal调用
      };
    case SET_OPEN_MODAL:
      return {
        ...state,
        openModal: action.payload
      };
    default:
      return state;
  }
}

步骤2：修正Modifier组件的状态映射 #

修改Modifier.js，确保映射到正确的Redux状态路径，并修正类型定义：

import React from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { setOpenModal } from "./Module";

@autobind
@authorize
@connect(
  (state) => ({
    // 修正路径：对应reducer挂载的openModal字段
    openModal: state.Attendance.Reports.openModal,
  }),
  { setOpenModal }
)
export default class Modifier extends React.PureComponent {
  static propTypes = {
    openModal: PropTypes.bool, // 类型改为布尔值，和reducer状态一致
    setOpenModal: PropTypes.func
  };

  render() {
    const { openModal } = this.props;

    console.log(openModal ? "true" : "false");

    return (
      <> {openModal ? "弹窗已打开" : "弹窗未打开"} </>
    );
  }
}

步骤3：确保getOpenModal所在组件已注入dispatch #

如果getOpenModal是在某个React组件中调用的，需要确保该组件通过connect注入dispatch：

// 示例调用组件
import { connect } from "react-redux";
import { getOpenModal } from "./Module";

class ReportComponent extends React.Component {
  render() {
    return getOpenModal(this.props.tableData, this.props.dispatch);
  }
}

export default connect()(ReportComponent);

• Redux状态更新必须遵循Action → Reducer → Store更新 → 组件重渲染的流程，不能直接修改局部变量或store状态。
• 组件通过connect映射状态时，必须保证路径和reducer挂载的路径完全一致。
• 状态类型要保持统一（布尔值/数组/对象），避免类型判断异常。

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