使用useReducer时Props未从父组件传递到子/孙组件问题

可能的原因 #

1. useReducer状态逻辑错误：初始state未定义isModalOpen字段，或reducer处理动作时未正确返回包含该字段的新状态，导致父组件的modalState.isModalOpen为undefined。
2. Props传递/接收拼写错误：父组件传递props时字段名写错（比如传open而非isModalOpen），或子组件解构props时拼写失误，导致子组件拿到的isModalOpen为undefined。
3. PropTypes类型不匹配：子组件的PropTypes定义中isModalOpen的类型与实际传递值不符，或未正确标记为必填，触发MUI Modal的必填prop警告。

解决方案 #

1. 修复useReducer状态逻辑 #

确保初始state包含isModalOpen，且reducer处理动作时返回新状态对象（禁止直接修改原state）：

// 父组件中的reducer配置
const initialState = { isModalOpen: false }; // 明确初始化isModalOpen为false

function modalReducer(state, action) {
  switch (action.type) {
    case 'OPEN_MODAL':
      return { ...state, isModalOpen: true }; // 展开原state，更新目标字段
    case 'CLOSE_MODAL':
      return { ...state, isModalOpen: false };
    default:
      throw new Error(`未知动作类型: ${action.type}`);
  }
}

2. 核对Props传递与接收 #

• 父组件传递props时，确保字段名与子组件接收的一致：

// 父组件中渲染AddButtonModal
<AddButtonModal
  isModalOpen={modalState.isModalOpen} // 确认字段名完全匹配
  handleCloseModal={handleCloseModal}
/>

• 子组件正确解构props，避免拼写错误：

// AddButtonModal组件
function AddButtonModal({ isModalOpen, handleCloseModal }) { // 正确解构目标字段
  return (
    <Modal2
      open={isModalOpen} // 直接绑定到Modal的open属性
      onClose={handleCloseModal}
    >
      <XButton onClick={handleCloseModal} /> {/* 传递关闭方法给孙组件 */}
    </Modal2>
  );
}

3. 修正PropTypes定义（若使用） #

确保子组件的PropTypes与传递的props类型匹配，避免类型不匹配警告：

import PropTypes from 'prop-types';

AddButtonModal.propTypes = {
  isModalOpen: PropTypes.bool.isRequired, // 明确标记为必填布尔值
  handleCloseModal: PropTypes.func.isRequired,
};

完整代码示例 #

父组件 IngredientsViewPage.tsx #

import { useReducer } from 'react';
import AddButtonModal from './AddButtonModal';

const initialState = { isModalOpen: false };

function modalReducer(state, action) {
  switch (action.type) {
    case 'OPEN_MODAL':
      return { ...state, isModalOpen: true };
    case 'CLOSE_MODAL':
      return { ...state, isModalOpen: false };
    default:
      throw new Error(`未知动作类型: ${action.type}`);
  }
}

export default function IngredientsViewPage() {
  const [modalState, dispatch] = useReducer(modalReducer, initialState);

  const handleOpenModal = () => dispatch({ type: 'OPEN_MODAL' });
  const handleCloseModal = () => dispatch({ type: 'CLOSE_MODAL' });

  return (
    <div>
      <button onClick={handleOpenModal}>打开添加模态框</button>
      <AddButtonModal
        isModalOpen={modalState.isModalOpen}
        handleCloseModal={handleCloseModal}
      />
    </div>
  );
}

子组件 AddButtonModal.tsx #

import Modal2 from '@mui/material/Modal';
import XButton from './XButton';
import PropTypes from 'prop-types';

function AddButtonModal({ isModalOpen, handleCloseModal }) {
  return (
    <Modal2
      open={isModalOpen}
      onClose={handleCloseModal}
      aria-labelledby="add-ingredient-modal-title"
    >
      <div style={{
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        backgroundColor: '#fff',
        padding: '2rem',
        borderRadius: '8px'
      }}>
        <h2 id="add-ingredient-modal-title">添加配料</h2>
        <XButton onClick={handleCloseModal} />
      </div>
    </Modal2>
  );
}

AddButtonModal.propTypes = {
  isModalOpen: PropTypes.bool.isRequired,
  handleCloseModal: PropTypes.func.isRequired,
};

export default AddButtonModal;

孙组件 XButton.tsx #

import Button from '@mui/material/Button';

function XButton({ onClick }) {
  return <Button variant="text" onClick={onClick}>×</Button>;
}

export default XButton;

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