React中在处理函数中获取useSelector存储变量的问题

核心问题 #

1. useEffect依赖缺失导致数据未同步
   你用来同步students到本地data的useEffect依赖项为空数组，仅会在组件首次挂载时执行一次。而dispatch(getStudents())是异步操作，首次挂载时students还是初始空数组，后续Redux获取到真实数据后，这个useEffect不会重新触发，导致data始终为空。

2. 不必要的本地状态同步
   将Redux中的students同步到本地data完全多余，直接使用useSelector获取的students即可，避免维护两份状态引发的不同步问题。

3. setState异步特性导致日志无效
   在useEffect中调用setdata(students)后立刻console.log(data)，由于setState是异步的，此时打印的仍是更新前的旧值，无法反映最新状态。

4. 数组方法使用不当
   filter返回的是匹配元素的数组，直接取list.id会得到undefined。由于学生ID是唯一标识，用find获取单个匹配对象更合适。

修复后的完整代码 #

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

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

  // 直接使用Redux中的students，无需同步到本地state
  const students = useSelector((state) => state.students);

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

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

  const handleScanWebCam = (result, error) => {
    if (result) {
      // 用find获取匹配的单个学生对象
      const matchedStudent = students.find(student => student.id === result.text);
            
      if (matchedStudent) {
        setScanResultWebCam({
          id: matchedStudent.id,
          grade: matchedStudent.grade,
          name: matchedStudent.name,
          section: matchedStudent.section
        });
        setOpenVerifier(true);
      } else {
        // 处理未找到学生的情况
        console.log('未匹配到对应学生');
        setOpenVerifier(false);
      }
    }
  }

  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={() => setOpenVerifier(false)}
        />
      </Container>
    </>
  )
}

额外优化点 #

• 移除了冗余的本地statedata，确保数据始终与Redux同步。
• 增加了未匹配学生的分支处理，提升代码健壮性。
• 修复了handleClose未定义的问题，直接调用setOpenVerifier(false)实现弹窗关闭逻辑。

内容的提问来源于stack exchange，提问作者Charlz Ivan John Babida