从反应表中的按钮打开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}/>
)

}

然后，basic modal component在一个单独的文件中：

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>
);

}

我不确定为什么模态不显示任何内容以及如何制作它工作，我还继续获得此缩小react错误说：

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

因此，我愚蠢的是不要彻底阅读提到的缩小错误，正如文档所说的