这是我第一次使用react-table，决定重新设计应用程序中的一个组件。我已经接近成功了，但在尝试通过按钮单击将一些数据传递给弹出对话框时卡住了。
在我以前的表格设计中，使用MUI Table，我使用array.map()来呈现每个行条目。然后，我所需要做的就是使用props将数据传递给Dialog组件，这样每个操作按钮都会从它们各自的条目中加载数据（包括未显示的数据，如_id）。现在使用react-table，由于逻辑变化，我不知道如何实现同样的结果。编辑和删除按钮都存在，它们触发对话框的打开，但我的进展止步于此。
Entries.jsx
function Entries(props) {
const navigate = useNavigate();
const [openEdit, setOpenEdit] = useState(false);
const [openDelete, setOpenDelete] = useState(false);
const handleEdit = () => {
setOpenEdit(true);
};
const handleDelete = () => {
setOpenDelete(true);
};
const handleClose = () => {
setOpenEdit(false);
setOpenDelete(false);
};
const data = props.data;
const columns = useMemo(
() => [
{
Header: "#",
id: "row",
Cell: ({ row }) => {
return <div>{row.index + 1}</div>;
},
},
{
Header: "Title",
accessor: "title",
className: "column-left",
Cell: ({ cell: { value }, row: { original } }) => (
<Link
sx={{
fontSize: "14px",
fontWeight: 500,
"&:hover": { color: "#00D67E" },
}}
color="#fff"
underline="none"
style={{ cursor: "pointer" }}
onClick={() => navigate(`/details/${original.movieId}`)}
>
{value}
</Link>
),
},
{
Header: "Year",
accessor: "year",
className: "column-right",
},
{
Header: "Rating",
accessor: "details[0].rating",
className: "column-right",
Cell: ({ cell: { value } }) => (
<Rating
size="small"
value={value}
readOnly
emptyIcon={<StarIcon fontSize="inherit" />}
/>
),
},
{
Header: "Watched",
accessor: "date",
className: "column-right",
Cell: ({ cell: { value } }) => format(new Date(value), "MMM dd, yyyy"),
},
{
Header: "View Count",
accessor: "details[0].view_count",
className: "column-right",
},
{
Header: "Review",
accessor: "details[0].review",
className: "column-right",
Cell: ({ cell: { value } }) =>
!value ? null : <CheckIcon color="primary" />,
},
{
Header: "Actions",
className: "column-right",
Cell: () => (
<div>
<IconButton
aria-label="edit"
style={{ color: "#e0e0e0" }}
onClick={handleEdit}
>
<EditIcon fontSize="small" />
</IconButton>
<IconButton
aria-label="delete"
style={{ color: "#e0e0e0", paddingRight: 0 }}
onClick={handleDelete}
>
<DeleteIcon fontSize="small" />
</IconButton>
</div>
),
},
],
[]
);
return (
<div>
{/* TABLE */}
<CustomTable columns={columns} data={data} />
{/* DIALOGS */}
<EditDialog
isOpen={openEdit}
onClose={handleClose}
id={data._id}
movieId={data.movieId}
date={data.date}
rating={data.details[0].rating}
review={data.details[0].review}
onUpdate={props.onUpdate}
/>
<DeleteDialog
isOpen={openDelete}
onClose={handleClose}
title="Delete this entry?"
message={
<span>
<strong>
{data.title} ({data.date})
</strong>{" "}
will be removed. This action cannot be undone.
</span>
}
onRemove={() => {
props.onRemove(data._id, data.movieId);
}}
/>
</div>
);
}
export default Entries;
后来我甚至尝试了一些东西来模仿我先前设计的逻辑，因为映射由CustomTable.jsx组件中的rows.map((row) => { prepareRow(row) }处理。于是我想出了这个：
{
Header: "Actions",
className: "column-right",
Cell: () => (
<div>
<IconButton
aria-label="edit"
style={{ color: "#e0e0e0" }}
onClick={({row}) => {
handleEdit();
return (
<EditDialog
isOpen={openEdit}
onClose={handleClose}
id={row._id}
movieId={row.movieId}
date={row.date}
rating={row.details[0].rating}
review={row.details[0].review}
onUpdate={props.onUpdate}
/>
);
}}
>
<EditIcon fontSize="small" />
</IconButton>
<IconButton
aria-label="delete"
style={{ color: "#e0e0e0", paddingRight: 0 }}
onClick={handleDelete}
>
<DeleteIcon fontSize="small" />
</IconButton>
</div>
),
}
但它也没有起作用。它停在第一个属性处并抛出一个错误，说它无法读取属性row._id。这是我最后的尝试。
openEdit && selectedRow &&部分，应用程序将尝试在呈现页面时立即触发对话框弹出（并且肯定会崩溃，因为尚未加载数据到状态中）。为什么会这样？难道它不应该在单击后设置openEdit后才触发操作吗？我不明白为什么您需要包含条件以及为什么只有在那里才起作用。 - Alex Bragaundefined值，因此当它尝试访问值时，例如selectedRow.details[0].rating，它将失败，因为undefined没有任何details[0].rating。您可以尝试删除条件，而不是传递selectedRow.details[0].rating，而是传递selectedRow?.details[0]?.rating。 - Vishnu Sajeev