0
272
Vistas¿Cómo paso los datos de texto de firestore dentro de la fila expandible y obtengo la identificación del documento para pasar dentro de setState?
En firestore, tengo este title de campos, createdDate y text . ¿Cómo visualizo el title de los campos y la fecha de creación en mui- createdDate . El text se mostraría entonces dentro de la fila expandida. ¿Cómo puedo hacer esto?
Así es como se ven los datos si consolaré.log los 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? }, }; Dentro de la devolución: Intenté poner los blogs dentro de los datos pero no funciona. No se muestran datos.
<MUIDataTable title={"List"} columns={columns} data={blogs} options={options} />1 Respuestas
Responde la pregunta0
Simplemente mueva sus setBlogs dentro del oyente onSnapshot como aquí:
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(); }; }, []); Si está fuera del oyente onSnapshot , siempre configuraría los blogs como una matriz vacía porque setBlogs se ejecutaría antes de que se active el oyente onSnapshot .
Esta es la forma en que puede enrojecer y expandir la fila:
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) };Es del ejemplo aquí . Solo asegúrese de que su estructura de datos pueda funcionar con el ejemplo (tal vez necesite adoptarlo un poco).