未能加载资源:net::ERR_UNKNOWN_URL_SCHEME

Question

我正试图使用react with redux构建一个snapchat克隆。我已经到了可以拍照的地步，但问题是当我拍照时，照片不会保存在当前状态，在控制台中会出现这个错误"；未能加载资源：net:：ERR_UNKNOWN_URL_SCHEME"被抛出。当我尝试使用redux-dev工具时，它显示图像返回为"；null数据：img/jpeg">

我使用chrome作为我的默认浏览器。

这是我必须显示预览的代码片段

function Preview() {
const cameraImage = useSelector(selectCameraImage);
const history = useHistory()
const dispatch = useDispatch()
useEffect(() => {
if (!cameraImage) {
history.replace('/')
}
}, [cameraImage, history])
const closePreview = () => {
dispatch(resetCameraImage());
}
return <div className="preview">
<CloseIcon onClick={closePreview} className="preview__close"/>
<img src={cameraImage} alt="" />
</div>;

Answer 1

我假设您有一个cameraSlice.js文件。如果是，请转到那里，将cameraImage的initialState从null更改为空字符串，如"。这应该行得通。让我知道

Answer 2

cameraSlice.js

import { createSlice } from "@reduxjs/toolkit";
const initialState = {
cameraImage: "",// instead of null use ""(though null works fine for me)
};
export const cameraSlice = createSlice({
name: "camera",
initialState,
reducers: {
resetCameraImage: (state) => {
state.cameraImage = null;// try changing null to "" here too
},
setCameraImage: (state, action) => {
state.cameraImage = action.payload;// take care to change the default += to just =, most probably the mistake you're making
},
},
});
export const { setCameraImage, resetCameraImage } = cameraSlice.actions;
export const selectCamera = (state) => state.camera.cameraImage;
export default cameraSlice.reducer;

WebcamCapture.js

import React, { useRef, useCallback } from "react";
import Webcam from "react-webcam";
import RadioButtonUncheckedOutlinedIcon from "@mui/icons-material/RadioButtonUncheckedOutlined";
import { useDispatch, useSelector } from "react-redux";
import { selectCamera, setCameraImage } from "./features/cameraSlice";
const videoConstraints = {
width: 250,
height: 400,
facingMode: "user",
};
function WebcamCapture() {
const webcamRef = useRef(null);
const dispatch = useDispatch();
const camImage = useSelector(selectCamera);
const capture = useCallback(() => {
const imageSrc = webcamRef.current.getScreenshot();
dispatch(setCameraImage(imageSrc));
}, [dispatch, webcamRef]);
return (
<div className="webcamCapture">
<Webcam
audio={false}
height={videoConstraints.height}
ref={webcamRef}
screenshotFormat={videoConstraints}
width={videoConstraints.width}
videoConstraints={videoConstraints}
/>
<RadioButtonUncheckedOutlinedIcon
className="webcamCapture__button"
onClick={capture}
fontSize="large"
/>
<img src={camImage} alt="" />
</div>
);
}
export default WebcamCapture;

这对我有效。