React 网络摄像头使用 redux--problem 预览捕获的图像“base64”

如何解决React 网络摄像头使用 redux--problem 预览捕获的图像“base64”

我使用 React-Redux 制作了一个用于状态管理的 React 网络摄像头应用

用于拍照并将base64发送到各自状态的网络摄像头代码

const videoConstraints = {
    width: 250,height: 400,facingMode: "user",};

const WebcamCapture = () => {
    const webcamRef = useRef(null);
    const dispatch = usedispatch();
    const history = useHistory();
    
    // It will prevent unnecessary re-renders.
    const capture = useCallback(() => {
      const imageSrc = webcamRef.current.getScreenshot();
      console.log("imageSrc")
      dispatch(setCameraimage(imageSrc))
      history.push("/preview")
    },[webcamRef])

    return (
        <div className="webcamCapture">
            <Webcam 
              audio={false}
              height={videoConstraints.height}
              width={videoConstraints.width}
              screenshotFormat="image/jpeg"
              ref={webcamRef}
              videoConstraints={videoConstraints}
            />
            
            <button className="webcamCapture__button"
              onClick={capture}
            >
              <RadioButtonUncheckedIcon        className="webcamCapture__button"
              />
            </button>
            
        </div>
    )

用于状态管理的 Redux 代码

export const cameraSlice = createSlice({
  name: 'camera',initialState: {
    cameraimage: null,},reducers: {
    setCameraimage: (state,action) => {
      state.cameraSlice = action.payload;
    },resetCameraimage: (state) => {
      state.cameraimage = null;
    },});

export const { setCameraimage,resetCameraimage } = cameraSlice.actions;

export const selectCameraimage = (state) => state.camera.cameraimage;

export default cameraSlice.reducer;

预览捕获的图像

function Preview() {
    const cameraimage = useSelector(selectCameraimage);
    const history = useHistory();
    const dispatch = usedispatch();
    console.log(cameraimage);

    useEffect(() => {
      if(!cameraimage) {
        history.replace("/")  
      } 
    },[cameraimage,history])

    const closePreview = () => {
       dispatch(resetCameraimage());
       history.replace("/");
    }
    
    return (
        <div className="preview">
            <button
              className="preview__close"
              onclick={closePreview}
            >
             <CloseIcon
               className="preview__close"
             />
            </button>
           
          <img src={atob(cameraimage)} alt="mage" />
        </div>
    )
}

问题是将图像 base64 url​​ 存储到 setCameraimage 后，我无法在预览屏幕和控制台中预览存储的图像（说 - “null”），它总是将我重定向到“/”页面，即使在 url 正确存储在 redux 之后。我可以在控制台中查看它所以请帮助我摆脱这个问题

提前致谢

问候， 马吉..