如何使数据在刷新 React JS 时保持不变？

Question

我有一个代码，我在其中安装了一个包含一些 firebase 数据的表，但由于某种原因，这些值消失了，我在接下来的 2 周里一直在努力解决这个问题，我还没有找到解决方案，我已经问过了已经两次了，到目前为止我已经尝试了所有方法，但它一直在消失。

重要更新 我只是想澄清以下显然我错了问题不是因为它是另一个问题中提到的嵌套集合。问题是因为我的“用户”在我刷新的过程中迷路了。

我将用户从登录带到应用程序，如下所示：

<Estudiantes user={user} />

然后我将它作为道具接收 function ListadoPedidos({user})

但是我迷路了，因为当我尝试使用我的火力基地时迷路了：

estudiantesRef = db.collection("usuarios").doc(user.uid).collection("estudiantes")

由于用户“迷路”，因此 uid 将为空。由于为 null，它永远不会到达集合和文档。

Answer 1

• 您的代码中的数据流有些矛盾，所以我修改了您的代码，它运行良好。
• 您也可以尝试删除或添加按钮，它会修改 Firebase 集合，然后更新本地数据。
• 您可以点击codesandbox previewer（不是浏览器）中的刷新按钮来观察数据更新的状态。

这里是代码片段：

  // Set value of `localStorage` to component state if it exist.
  useEffect(() => {
    const localStorageEstData = window.localStorage.getItem("estudiantes");
    localStorageEstData && setEstudiantes(JSON.parse(localStorageEstData));
  }, []);

  // Sync remote data from firebase to local component data state.
  useEffect(() => {
    // Subscribe onSnapshot
    const unSubscribe = onSnapshot(
      collection(db, "usuarios", user.id, "estudiantes"),
      (snapshot) => {
        const remoteDataSource = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data()
        }));
        console.info(remoteDataSource);
        setEstudiantes(remoteDataSource);
      }
    );
    return () => {
      //unSubscribe when component unmount.
      unSubscribe();
    };
  }, [user.id]);

  // when `estudiantes` state update, `localStorage` will update too.
  useEffect(() => {
    window.localStorage.setItem("estudiantes", JSON.stringify(estudiantes));
  }, [estudiantes]);

这里是完整的代码示例：

希望能帮到你:)

Answer 2

我有一个简单的解决方案给你。只需将 localStorage 的解析提升一级，将 preloadedState 作为 prop 传递到您的组件中，然后使用它来初始化您的 state 变量。

const ListadoEstudiantes = (props) => {
  const estData = JSON.parse(window.localStorage.getItem('estudiantes'));
  return <Listado preloadedState={estData} {...props} />;
};

然后用 prop 初始化 state

  const initialState = props.preloadedState || [];
  const [estudiantesData, setEstudiantesData] = useState(initialState);

最后，更新 useEffect 挂钩以在状态发生变化时保持状态。

  useEffect(() => {
    window.localStorage.setItem('estudiantes', JSON.stringify(estudiantes));
  }, [estudiantes]);

完整代码

import React, { useState, useEffect } from 'react';
import { db } from './firebase';
import { useHistory } from 'react-router-dom';
import './ListadoEstudiantes.css';
import {
  DataGrid,
  GridToolbarContainer,
  GridToolbarFilterButton,
  GridToolbarDensitySelector,
} from '@mui/x-data-grid';
import { Button, Container } from '@material-ui/core';
import { IconButton } from '@mui/material';
import PersonAddIcon from '@mui/icons-material/PersonAddSharp';
import ShoppingCartSharpIcon from '@mui/icons-material/ShoppingCartSharp';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import { Box } from '@mui/system';

const ListadoEstudiantes = (props) => {
  const estData = JSON.parse(window.localStorage.getItem('estudiantes'));
  return <Listado preloadedState={estData} {...props} />;
};

const Listado = ({ user, preloadedState }) => {
  const history = useHistory('');
  const crearEstudiante = () => {
    history.push('/Crear_Estudiante');
  };

  const initialState = preloadedState || [];
  const [estudiantesData, setEstudiantesData] = useState(initialState);

  const parseData = {
    pathname: '/Crear_Pedidos',
    data: estudiantesData,
  };

  const realizarPedidos = () => {
    if (estudiantesData == 0) {
      window.alert('Seleccione al menos un estudiante');
    } else {
      history.push(parseData);
    }
  };

  function CustomToolbar() {
    return (
      <GridToolbarContainer>
        <GridToolbarFilterButton />
        <GridToolbarDensitySelector />
      </GridToolbarContainer>
    );
  }

  const [estudiantes, setEstudiantes] = useState([]);
  const [selectionModel, setSelectionModel] = useState([]);
  const columns = [
    { field: 'id', headerName: 'ID', width: 100 },

    { field: 'nombre', headerName: 'Nombre', width: 200 },

    { field: 'colegio', headerName: 'Colegio', width: 250 },

    { field: 'grado', headerName: 'Grado', width: 150 },
    {
      field: 'delete',
      width: 75,
      sortable: false,
      disableColumnMenu: true,
      renderHeader: () => {
        return (
          <IconButton
            onClick={() => {
              const selectedIDs = new Set(selectionModel);
              estudiantes
                .filter((x) => selectedIDs.has(x.id))
                .map((x) => {
                  db.collection('usuarios')
                    .doc(user.uid)
                    .collection('estudiantes')
                    .doc(x.uid)
                    .delete();
                });
            }}
          >
            <DeleteOutlinedIcon />
          </IconButton>
        );
      },
    },
  ];

  const deleteProduct = (estudiante) => {
    if (window.confirm('Quiere borrar este estudiante ?')) {
      db.collection('usuarios').doc(user.uid).collection('estudiantes').doc(estudiante).delete();
    }
  };

  useEffect(() => {}, [estudiantesData]);

  const estudiantesRef = db.collection('usuarios').doc(user.uid).collection('estudiantes');
  useEffect(() => {
    estudiantesRef.onSnapshot((snapshot) => {
      const tempData = [];
      snapshot.forEach((doc) => {
        const data = doc.data();
        tempData.push(data);
      });
      setEstudiantes(tempData);
      console.log(estudiantes);
    });
  }, []);

  useEffect(() => {
    window.localStorage.setItem('estudiantes', JSON.stringify(estudiantes));
  }, [estudiantes]);

  return (
    <Container fixed>
      <Box mb={5} pt={2} sx={{ textAlign: 'center' }}>
        <Button
          startIcon={<PersonAddIcon />}
          variant="contained"
          color="primary"
          size="medium"
          onClick={crearEstudiante}
        >
          Crear Estudiantes
        </Button>
        <Box pl={25} pt={2} mb={2} sx={{ height: '390px', width: '850px', textAlign: 'center' }}>
          <DataGrid
            rows={estudiantes}
            columns={columns}
            pageSize={5}
            rowsPerPageOptions={[5]}
            components={{
              Toolbar: CustomToolbar,
            }}
            checkboxSelection
            //Store Data from the row in another variable
            onSelectionModelChange={(id) => {
              setSelectionModel(id);
              const selectedIDs = new Set(id);
              const selectedRowData = estudiantes.filter((row) => selectedIDs.has(row.id));
              setEstudiantesData(selectedRowData);
            }}
            {...estudiantes}
          />
        </Box>
        <Button
          startIcon={<ShoppingCartSharpIcon />}
          variant="contained"
          color="primary"
          size="medium"
          onClick={realizarPedidos}
        >
          Crear pedido
        </Button>
      </Box>
    </Container>
  );
};

Answer 3

我怀疑这是因为这个 useEffect 没有依赖数组并且在每次渲染时都会运行。

useEffect (() => {
   window.localStorage.setItem("estudiantes", JSON.stringify(estudiantes))
 })

尝试如下添加依赖数组：

useEffect (() => {
if (estudiantes && estudiantes.length>0)
   window.localStorage.setItem("estudiantes", JSON.stringify(estudiantes))
 },[estudiantes])

当它在第一次渲染上运行时，这仍会将localStorage 设置为[]。但是当获取数据并设置estudiantes 时，localStorage 值将被更新。所以我添加了一个检查来检查它是否不是空数组。

把这个useEffect的依赖数组改成[]：

  estudiantesRef.onSnapshot(snapshot => {
    const tempData = [];
    snapshot.forEach((doc) => {
      const data = doc.data();
      tempData.push(data);
    });
    setEstudiantes(tempData);
    console.log(estudiantes)
  })
 }, []);