从反应表中的按钮打开 MUI 模式不起作用

Question

我有一个反应表，其中一列包含每一行的按钮，应该用于使用 MUI 的模式查看行详细信息。

这是我的表格列数据的片段：

export const COLUMNS = [
{...},
{
    Header: 'Actions',
    Cell: (row) => (
        <span>
            {row.row.original.id !== null ? (
                <>
                    <button value={row.row.original.id} onClick={(e) => handleModal(e, row.row.original.id)}>
                        <FontAwesomeIcon icon={someIcon} />
                    </button>
                </>
            ) : "No ID!"}
        </span>
    ),
    className: 'actions'
}

];

在另一个文件中，我有这个handleModal函数：

export function handleModal(e, row) {
const [open, setOpen] = useState(false);
setOpen(true);

console.log('Row details: ', row);

return (  
    <BasicModal open={open} onClose={() => setOpen(false)} row={row}/>
)

}

然后将BasicModal组件放在一个单独的文件中：

export default function BasicModal(props) {

// const {row, open, handleClose} = props;
// const [open, setOpen] = React.useState(true);
// const handleOpen = () => setOpen(true);
// const handleClose = () => setOpen(false);

console.log("PROPS in MODAL", props);

return (
    <div>
        {/* <Button onClick={handleOpen}>Open modal</Button> */}
        <Modal
            open={props.open}
            onClose={props.onClose}
            aria-labelledby="modal-modal-title"
            aria-describedby="modal-modal-description"
        >
            <Box sx={style}>
            <Typography id="modal-modal-title" variant="h6" component="h2">
                Text in a modal
            </Typography>
            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
                Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </Typography>
            </Box>
        </Modal>
    </div>
);

}

我不确定为什么模态没有显示任何内容以及如何使其工作，我也不断收到这个Minified React error说：

Invalid hook call. Hooks can only be called inside of the body of a function component.
This could happen for one of the following reasons: 
  1. You might have mismatching versions of React and the renderer (such as React DOM) 
  2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Answer 1

所以我不仔细阅读所提到的缩小错误是愚蠢的，正如文档所说，

🔴 Do not call (hooks) in event handlers.

所以我所做的是创建一个模态函数并调用它而不是一个按钮。

export const COLUMNS = [
{...},
{
    Header: 'Actions',
    Cell: (row) => (
        <span>
            {row.row.original.id !== null ? (
                <>
                    <BasicModal row={row.row.original.id} />
                </>
            ) : "No ID!"}
        </span>
    ),
    className: 'actions'
}

];