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) => {
                        console.log(tableMeta, "tableMeta")
                    return (
                        <StatusModal
                        details={() => {
                            const { ActionType, RequestedByName } = updatedStatus[
                                tableMeta.rowIndex
                            ];

                            showModal({
                                metadata: {
                                    ActionType: ActionType,
                                    RequestedByName: RequestedByName
                                },
                            });
                        }}>
                        {value}
                    </StatusModal>
                        )
                }
            }
        },

我目前无法取回任何数据，然后我无法将这些数据传递给StatusModal，这是实现我所要达到的目标的最佳方法是什么？

如何使用React Hook从API传递数据？

0 个答案: