如何将数据传递到模态

Question

我当前正在具有数据的表中实现功能。您可以在此表上对特定条目执行操作。然后，名称旁边会出现一个图标，其中包含正在请求的操作（当前正在等待批准）。尝试从API获取真实数据而不是模态内部的硬信息时遇到问题。

我目前有一个名为StatusModal的组件，该组件具有硬编码信息。我计划在其他表中重用此组件，但我不想从这里获取API中的数据。

       const details = {
            ActionRequested: "Canceled",
            RequestedBy: "Jon Snow",
            ActionStatus: "Pending",
        }

    return (
        <div>
            <WarningIcon
                className={classes.warningIcon}
                aria-describedby={id}
                variant="contained"
                onClick={handleClick}>
                Open Popover
            </WarningIcon>
            <Popover
                id={id}
                open={open}
                anchorEl={anchorEl}
                onClose={handleClose}
                anchorOrigin={{
                    vertical: "bottom",
                    horizontal: "center"
                }}
                transformOrigin={{
                    vertical: "top",
                    horizontal: "center"
                }}>
                <Typography className={classes.typography} variant="subtitle1" gutterBottom >
                      Action Requested: {details.ActionRequested}   </Typography>
                <Typography className={classes.typography} variant="subtitle1" gutterBottom>
                     Requested By: {details.RequestedBy}
                </Typography> 
              <Typography  className={classes.typography} variant="subtitle1"  gutterBottom>
                    Action Status: {details.ActionStatus}
                </Typography>
            </Popover>
        </div>

第二，我还有一个名为StaffTable的组件，它具有来自我的API的数据。我试图从我的API中获取ActionRequested和RequestedBy的值到导入的StatusModal中。我正在尝试使用StatusModal details = {{ActionType，RequestedByName}

来尝试接收2个值的对象

function StaffTable({ staff, showAlert, refresh, classes }) {
    const [sortType, setSortType] = useState(null);

    const [updatedStaff, setUpdatedStaff] = useState(staff);
    // console.log(staff);
    React.useEffect(() => {
        setUpdatedStaff(staff);
    }, [staff]);

    const initialColumns = [

        {
            name: "",
            label: "",
            options: {
                filter: false,
                sort: false,
                customBodyRender: (value, tableMeta) => {
                    return (
                        <StatusModal details={ { ActionType,RequestedByName } = updatedStaff [ 
                            tableMeta.rowIndex
                        ] 

                    }/>
                        )
                }
            }
        },

我目前无法取回任何数据，然后我无法传递到我的“状态模式”中，什么是实现我想要达到的最佳方法？

Answer 1

StatusModal组件内部的

details的传递值，必须使用this.props.details而不是details.*。

例如：

<Typography className={classes.typography} variant="subtitle1" gutterBottom>
    Action Requested: {details.ActionRequested}
</Typography>

成为

<Typography className={classes.typography} variant="subtitle1" gutterBottom>
    Action Requested: {this.props.details.ActionRequested}
</Typography>