Material-Table自定义Modal按钮无法切换状态问题求助

看起来你遇到的核心问题是状态更新没有触发组件重新渲染，导致isShowing的变化无法被捕获。让我一步步帮你梳理和修复：

问题根源 #

你当前的代码把Modal和状态逻辑直接写在了Material-Table的columns.render回调里，这个回调是Material-Table内部调用的，状态的更新无法触发表格组件的重新渲染，所以isShowing的变化不会反映到UI上。另外，每一行都渲染一个Modal也会造成不必要的性能浪费。

修复方案 #

我们需要把状态逻辑提升到表格组件的作用域内，并且只维护一个Modal实例，通过状态存储当前要编辑的行数据：

1. 调整useModal Hook（扩展为支持行数据） #

可以给你的Modal Hook增加存储当前编辑行的能力，方便后续获取要修改的数据：

const useModal = () => {
  const [isShowing, setIsShowing] = useState(false);
  const [currentRow, setCurrentRow] = useState(null);

  function toggle(rowData = null) {
    setIsShowing(!isShowing);
    setCurrentRow(rowData);
  }

  return { isShowing, toggle, currentRow };
};

2. 重构表格组件代码 #

把状态和Modal移到表格组件的根级别，而不是每一行内部：

const YourTableComponent = () => {
  const { isShowing, toggle, currentRow } = useModal();
  const [state, setState] = useState({
    columns: [
      { title: "Department", field: "department" },
      { title: "Security", field: "security", type: "numeric" },
      { title: "Status", field: "status" },
      { 
        title: "Actions", 
        field: "actions", 
        render: rowData => (
          <div className="edit-button">
            <span className="fas fa-pencil-alt" onClick={() => toggle(rowData)} />
          </div>
        ) 
      }
    ],
    data: [{ department: "Admin", security: 10, status: "Active" }]
  });

  return (
    <div>
      <MaterialTable 
        title="Departments" 
        columns={state.columns} 
        data={state.data}
        editable={{
          onRowAdd: newData => new Promise(resolve => {
            setTimeout(() => {
              resolve();
              setState(prevState => {
                const data = [...prevState.data];
                data.push(newData);
                return { ...prevState, data };
              });
            }, 600);
          })
        }} 
      />
      {/* 只渲染一个Modal，根据currentRow显示对应内容 */}
      <Modal 
        isShowing={isShowing} 
        hide={() => toggle()}
        currentRow={currentRow}
      />
    </div>
  );
};

3. 更新Modal组件以支持行数据 #

让Modal可以接收并显示当前编辑的行信息，方便后续实现修改逻辑：

const Modal = ({ isShowing, hide, currentRow }) => isShowing ? ReactDOM.createPortal(
  <React.Fragment>
    <div className="modal-overlay"/>
    <div className="modal-wrapper" aria-modal aria-hidden tabIndex={-1} role="dialog">
      <div className="modal">
        <div className="modal-header">
          <button 
            type="button" 
            className="modal-close-button" 
            data-dismiss="modal" 
            aria-label="Close" 
            onClick={hide}
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        {currentRow && (
          <div className="modal-body">
            <p>编辑部门：{currentRow.department}</p>
            {/* 这里可以添加表单组件，绑定currentRow的数据进行修改 */}
          </div>
        )}
      </div>
    </div>
  </React.Fragment>, 
  document.body 
) : null;

为什么这样能解决问题？ #

• 状态isShowing和currentRow现在属于表格组件的作用域，调用toggle时会触发表格组件重新渲染，Modal的显示状态也会随之更新。
• 只渲染一个Modal实例，避免了重复渲染的性能问题，同时通过currentRow来区分当前要编辑的行。
• 点击按钮时传递当前行数据到Modal，为后续的修改操作提供了数据基础。

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