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

Question

在 firestore 中，我有以下字段 title、createdDate 和 text。如何在 mui 数据表中显示字段 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?
    },

  };

返回内:我尝试将 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 .只需确保您的数据结构是否适用于该示例(也许您需要稍微采用一下)。