從反應表中的按鈕打開 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'
}

];