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

Question

在 firestore 中，我有这些字段 title、createdDate 和 text。如何在 mui-datatable 中显示字段 title 和 createdDate。然后 text 将显示在展开的行内。我该怎么做？

如果我 console.log 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?
    },

  };

在 return 内：我尝试将 blogs 放在数据内，但它不起作用。没有数据显示。

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

Answer 1

只需将 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)
    };

来自示例 here。只需确保您的数据结构是否适用于该示例（也许您需要稍微采用一下）。

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

How do I pass the text data from firestore inside the expandable row and get the document ID to be passed inside the setState?

javascript

reactjs

firebase

google-cloud-firestore

mui-datatable