reactjs Material UI DataGrid Pro renderCell带有异步数据

rbpvctlc 于 5个月前发布在 React

关注(0)|答案(1)|浏览(71)

我使用Material UI的DataGrid Pro。我有一个用户头像的列，我需要异步获取图像。我想在加载图像时显示一个 backbone URL图像，然后将其交换为实际URL。这是我目前的方法：

{
      field: "avatar",
      headerName: "",
      headerClassName: "tableHeader",
      width: 80,
      cellClassName: "profilePictureCell",
      renderCell: async (params: GridRenderCellParams<CounselorDashboardStudentRow>) => {
        const url = await getDownloadURL(
          ref(storage, params.value)
        );
        return (
          <Avatar
            alt={params.row.firstName + " " + params.row.lastName}
            src={url ? url : ""}
            sx={{ width: 50, height: 50, mt: 1, mb: 1 }}
          />
        );
      },
    },

字符串
当我运行这个时，我得到一个错误，说明renderCell试图返回一个Promise而不是一个JSX元素。
我不确定我在这里使用的是最好的方法，并且可以使用帮助来弄清楚如何在特定列中动态地呈现P2P内容。
我不想异步加载整行，因为其他数据都不需要重新呈现。

reactjs

来源：https://stackoverflow.com/questions/77624002/material-ui-datagrid-pro-rendercell-with-asynchronous-data

1条答案

按热度按时间

6jjcrrmo1#

renderCell类型似乎接受异步回调，但实际上并不等待promise，而是同步调用函数。
遇到这种情况时，我使用的解决方案是创建一个单独的组件来处理加载数据，然后将该组件传递给renderCell。
您的案例示例：

export const AvatarCell = ({
  params,
}: GridRenderCellParams<CounselorDashboardStudentRow>) => {
  const [url, setUrl] = useState<string>();

  useEffect(() => {
    const getUrl = async () => {
      try {
        const url = await getDownloadURL(ref(storage, params.value));
        setUrl(url);
      } catch (error) {
        console.error("Error getting URL", error);
      }
    };

    getUrl();
  }, [params.value]);

  return (
    <Avatar
      alt={`${params.row.firstName} ${params.row.lastName}`}
      src={url || ""}
      sx={{ width: 50, height: 50, mt: 1, mb: 1 }}
    />
  );
};

字符串
然后同步传递到renderCell：

renderCell: (params) => <AvatarCell params={params} />

型

赞(0）回复(0）举报 5个月前

我来回答

reactjs Material UI DataGrid Pro renderCell带有异步数据

1条答案

相关问题

热门标签

最新问答