REACT- 弹出窗口不显示我的 json 内容

Question

在menu/中没有显示我邀请的人的名字，只有InfoIcon在单元格中。我想创建一个 Popover，当你点击 InfoIcon 时，你会得到被邀请人的所有信息（姓名和位置）。

export default function Display() {
  const { dishes } = JsonData;
  const [anchor, setAnchor] = useState(null);
  const openPopover = (event) => {
    setAnchor(event.currentTarget);
  };

  const data = useMemo(
    () => [
     ...
      {
        //Problem: participants not displayed and click not working
        Header: "Invited",
        id: "invited",
        accessor: (row) => row.invited.map(({ name }) => name).join(", "),
        Cell: (props) => (
          <div>
            <InfoIcon />
            <Popover
              open={Boolean(anchor)}
              anchorEl={anchor}
              anchorOrigin={{
                vertical: "top",
                horizontal: "left"
              }}
              transformOrigin={{
                vertical: "bottom",
                horizontal: "right"
              }}
            >
              <Typography variant="h1">{props.participants}</Typography>
            </Popover>
          </div>
        )
      },
    ],
    []
  );

  return (
    <Table
      data={dishes}
      columns={data}         
    />
  );
}

这是我的code

Answer 1

除了将点击的元素保存到状态之外，因此 Popover 组件有一个元素引用，它还需要在状态中存储特定行的参与者以呈现到弹出窗口中。当前，代码对 all 弹出窗口使用单个布尔值。使用 row.id 打开特定的弹出窗口。

不要忘记将“锚点”状态添加到依赖项数组，以便弹出窗口获得最新状态。

function Display() {
  const { menus } = JsonData;

  const [anchorId, setAnchorId] = useState(null);
  const [anchorEl, setAnchorEl] = useState(null);

  const openPopover = id => (event) => {
    setAnchorId(id);
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorId(null);
    setAnchorEl(null);
  };

  const data = useMemo(
    () => [
      {
        Header: "Id",
        accessor: (row) => row.id
      },
      {
        Header: "Invited",
        id: "invited",
        accessor: (row) => row.invited,
        Cell: (props) => (
          <div>
            {props.value.map(({ name }) => name).join(", ")}
            <InfoIcon onClick={openPopover(props.row.id)} />
            <Popover
              open={anchorId === props.row.id}
              onClose={handleClose}
              anchorEl={anchorEl}
              anchorOrigin={{
                vertical: "top",
                horizontal: "left"
              }}
              transformOrigin={{
                vertical: "bottom",
                horizontal: "right"
              }}
            >
              <Typography variant="h6">
                {props.value.map(({ name, location }) => (
                  <div key={name}>
                    <p>{name}</p>
                    <p>Location: {location}</p>
                  </div>
                ))}
              </Typography>
            </Popover>
          </div>
        )
      },
      {
        Header: "Title",
        accessor: (row) => ({ title: row.title, id: row.id }),
        Cell: ({ value }) => (
          <Link to={{ pathname: `/menu/${value.id}` }}>{value.title}</Link>
        )
      }
    ],
    [anchorEl, anchorId]
  );

  const initialState = {
    sortBy: [
      { desc: false, id: "id" },
      { desc: false, id: "invited" },
      { desc: false, id: "title" }
    ]
  };

  return (
    <Table
      data={menus}
      columns={data}
      initialState={initialState}
      withCellBorder
      withRowBorder
      withSorting
      withPagination
    />
  );
}

REACT- 弹出窗口不显示我的 json 内容

REACT- Popover doesn't display my json content

javascript

popover

reactjs

material-ui

react-hooks