javascript - 获取在我的处理函数中存储 useSelector 的变量的访问权限

Question

我试图通过将其值放入一个状态来访问 students 变量，然后在我的处理函数中访问该状态，但它总是返回一个空数组。

const students = useSelector((state) => state.students);

useEffect(() => {
  setdata(students);
  console.log(data);
}, [])

const handleScanWebCam = (result, error) => {
  if (result) {
    console.log(data)

    const list = data.filter(function (student) {
      return student.id === result.text;
    })
            
    setScanResultWebCam({
      id: list.id,
      grade: list.grade,
      name: list.name,
      section: list.section
    });

  }
}

这是我的完整代码

function QrScanner() {
  const dispatch = useDispatch(getStudents())

  useEffect(() => {
    dispatch(getStudents());
  }, [dispatch])

  const students = useSelector((state) => state.students);

  const [scanResultWebCam, setScanResultWebCam ] = useState({
    id: '',
    grade: '',
    name: '',
    section:''
  });

  const [openVerifier, setOpenVerifier] = useState(false);
  const [data, setdata] = useState([]);

  useEffect(() => {
    setdata(students);
    console.log(data);
  }, [])

  const handleScanWebCam = (result, error) => {
    if (result) {
      const list = data.filter(function (student) {
        return student.id === result.text;
      })
            
      setScanResultWebCam({
        id: list.id,
        grade: list.grade,
        name: list.name,
        section: list.section
      });

      setOpenVerifier(true);
    }
  }

  return (
    <>
      <NavBar />
      <Container
        sx={{
          display: 'flex',
          marginTop: '4rem',
          flexWrap: 'wrap',
          gap: '12px',
          width: '90%'
        }}
      >
        <Box
          sx={{
            width: '50%',
            border: 'solid',
            display: 'flex',
            flex: '1'
          }}
        >
          <QrReader
            scanDelay={500}
            containerStyle={{ width: '25rem', margin: 'auto'}}
            onResult={handleScanWebCam}
            // onError={handleErrorWebcam}
          />
        </Box>
        <PopupVerifier 
          details={scanResultWebCam}
          verifier={openVerifier}
          handleClose={() => handleClose()}
        />
      </Container>
    </>
  )
}

Answer 1

如果您需要缓存所选 students 状态的“重复”，那么我建议在 React ref 中缓存 students ，该引用可以读取其当前值组件生命周期中的任何时间，尤其是在过时的闭包中。

示例:

function QrScanner() {
  const dispatch = useDispatch(getStudents());

  useEffect(() => {
    dispatch(getStudents());
  }, [dispatch]);

  const students = useSelector((state) => state.students);
  const studentsRef = React.useRef(students);

  useEffect(() => {
    studentsRef.current = students;
  }, [students]);

  ...

  const handleScanWebCam = (result, error) => {
    if (result) {
      const list = studentsRef.current.find(
        (student) => student.id === result.text
      );

      if (list) {
        setScanResultWebCam(list);
      }

      setOpenVerifier(true);
    }
  };

  return (
    ...
  );
}