Mui-dataTables：如何从可扩展行内的firestore传递文本数据，并在设置处传递文档ID？

Question

在Firestore中，我有这个字段

title

，

createdDate

和

text

。如何在MUI-DataTable中显示字段

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

在这里像这里一样：

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();
  };
}, []);

将在驱动the line之前执行。

这是您可以红色和可扩展行的方式：

onSnapshot

the from示例

here

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