React+Redux获取摄像头图片报错：Cannot read properties of undefined (reading 'value')

以下是针对你问题的具体排查和解决步骤：

1. 检查cameraSlice的初始状态 #

确保你的cameraSlice中cameraImage的初始值不是undefined，避免未赋值时触发错误。示例：

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  cameraImage: null, // 用null或空字符串替代undefined
};

const cameraSlice = createSlice({
  name: 'camera',
  initialState,
  reducers: {
    setCameraImage: (state, action) => {
      state.cameraImage = action.payload;
    },
    resetCameraImage: (state) => {
      state.cameraImage = null;
    },
  },
});

export const { setCameraImage, resetCameraImage } = cameraSlice.actions;
export const selectCameraImage = (state) => state.camera.cameraImage;
export default cameraSlice.reducer;

2. 确保拍照时正确dispatch action #

调用react-webcam的getScreenshot()后，先验证返回的图片数据有效，再dispatch存储动作，避免将undefined存入Redux：

import React, { useRef } from 'react';
import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';
import Webcam from 'react-webcam';
import { setCameraImage } from './cameraSlice';

const Camera = () => {
  const webcamRef = useRef(null);
  const dispatch = useDispatch();
  const history = useHistory();

  const capture = () => {
    const imageSrc = webcamRef.current?.getScreenshot();
    // 确保获取到有效截图再dispatch
    if (imageSrc) {
      dispatch(setCameraImage(imageSrc));
      history.push('/preview');
    }
  };

  return (
    <div>
      <Webcam ref={webcamRef} />
      <button onClick={capture}>拍照</button>
    </div>
  );
};

export default Camera;

3. 在Preview组件中添加空值校验 #

在使用selectCameraImage获取数据后，先判断数据是否存在，避免直接访问undefined的属性：

import React from 'react';
import { useSelector } from 'react-redux';
import { Redirect } from 'react-router-dom';
import { selectCameraImage } from './cameraSlice';

const Preview = () => {
  const cameraImage = useSelector(selectCameraImage);

  // 如果没有图片数据，重定向回拍照页
  if (!cameraImage) {
    return <Redirect to="/" />;
  }

  return (
    <div>
      <img src={cameraImage} alt="拍照预览" />
      {/* 其他预览操作组件 */}
    </div>
  );
};

export default Preview;

4. 验证selector的正确性 #

确认selectCameraImage的定义是否匹配你的Redux state结构，不要错误地尝试访问不存在的value属性——如果你的cameraImage存储的是图片URL字符串，直接返回state.camera.cameraImage即可，无需额外访问.value。

内容的提问来源于stack exchange，提问作者Shivangi Bose