时间戳

首页 > 解决方案 > 如何在可扩展行内传递来自 firestore 的文本数据并获取要在 setState 内传递的文档 ID？

javascript - 如何在可扩展行内传递来自 firestore 的文本数据并获取要在 setState 内传递的文档 ID？

问题描述

在 Firestore 中，我有这个字段title,createdDate和text. 如何在 mui 数据表title中显示字段。createdDate然后text将显示在展开的行内。我怎样才能做到这一点？

如果我将控制台记录下来，这就是数据的样子blogs： 在此处输入图像描述

const columns = ["Title", "Created Date"];
const [blogs, setBlogs] = useState([]);

 useEffect(() => {
const unsubscribe = firestore
  .collection("blogs")
  .onSnapshot((snapshot) => {
    const arr = [];
    snapshot.forEach((doc) => {
      const data = doc.data();
      arr.push({
        text: parse(data.text),
        Title: data.title,
        "Created Date": new Date(
          data.createdDate.seconds * 1000
        ).toDateString(),
      });
    });
    setBlogs(arr);
    setIsLoading(true);
  });

    return () => {
      unsubscribe();
    };
  }, []);

  const options = {
    filter: true,
    expandableRows: true,
    renderExpandableRow: (rowData, rowMeta) => {
      console.log(); //how do I render the `text` here from firestore?
    },

  };

返回内部：我尝试将blogs数据放入内部，但它不起作用。没有数据显示。

 <MUIDataTable
    title={"List"}
    columns={columns}
    data={blogs}
    options={options}
  />

标签： javascriptreactjsfirebasegoogle-cloud-firestoremui-datatable

解决方案

只需像这里一样移动你的听众setBlogs内部：onSnapshot

useEffect(() => {
  const unsubscribe = firestore
    .collection("blogs")
    .onSnapshot((snapshot) => {
      const arr = [];
      snapshot.forEach((doc) => {
        const data = doc.data();
        arr.push({
          text: parse(data.text),
          Title: data.title,
          "Created Date": new Date(data.createdDate.seconds * 1000).toDateString(),
        });
        setBlogs(arr);
      });
    
      setIsLoading(true);
  });

  return () => {
    unsubscribe();
  };
}, []);

如果它在onSnapshot侦听器之外，您将始终将其设置blogs为空数组，因为setBlogs它将在onSnapshot侦听器被触发之前执行。

这是他们可以使行更红和可扩展的方式：

import MUIDataTable, {ExpandButton} from "../../src/";
import TableRow from "@material-ui/core/TableRow";
import TableCell from "@material-ui/core/TableCell";

 const options = {
      filter: true,
      filterType: 'dropdown',
      responsive: 'standard',
      expandableRows: true,
      expandableRowsHeader: false,
      expandableRowsOnClick: true,
      isRowExpandable: (dataIndex, expandedRows) => {
        if (dataIndex === 3 || dataIndex === 4) return false;

        // Prevent expand/collapse of any row if there are 4 rows expanded already (but allow those already expanded to be collapsed)
        if (expandedRows.data.length > 4 && expandedRows.data.filter(d => d.dataIndex === dataIndex).length === 0) return false;
        return true;
      },
      rowsExpanded: [0, 1],
      renderExpandableRow: (rowData, rowMeta) => {
        const colSpan = rowData.length + 1;
        return (
          <TableRow>
            <TableCell colSpan={colSpan}>
              Custom expandable row option. Data: {JSON.stringify(rowData)}
            </TableCell>
          </TableRow>
        );
      },
      onRowExpansionChange: (curExpanded, allExpanded, rowsExpanded) => console.log(curExpanded, allExpanded, rowsExpanded)
    };

它来自这里的示例。只需确保您的数据结构是否可以与示例一起使用（也许您需要稍微采用它）。

推荐阅读