ReactJS速成课程中针对初学者的无效挂钩调用

Question

我正在努力跟上这个youtube视频https://youtu.be/tbvguOj8C-o?t=33570

在下一次代码更新(大约一分钟(之前，我在视频中遇到了问题

具体来说，创建者添加了这些更改，这些更改会导致无效的挂机呼叫

import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
...
const capture = useCallback(() => {
const imageSrc = webcamRef.current.getScreenshot();
console.log(imageSrc);
}, [webcamRef]);
...
<RadioButtonUncheckedIcon
className='WebcamCapture__button'
onClick={capture}
/>

文件的完整代码在这里：

import React, {useCallback, useRef} from "react";
import Webcam from "react-webcam";
import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
const videoConstraints = {
width: 250,
height: 400,
facingMode: "user",
};
function WebcamCapture() {
const webcamRef = useRef(null);
const capture = useCallback(() => {
const imageSrc = webcamRef.current.getScreenshot();
console.log(imageSrc);
}, [webcamRef]);
return ( 
<div className="webcamCapture">
<Webcam
audio={false}
height={videoConstraints.height}               
ref={webcamRef}
screenshotFormat="image/jpeg"
width={videoConstraints.width}
videoConstraints={videoConstraints}
/>
<RadioButtonUncheckedIcon
className='WebcamCapture__button'
onClick={capture}
/>
</div>
);
}
export default WebcamCapture;

此处使用WebcamCapture组件：

import React from 'react';
import WebcamCapture from './WebcamCapture';
function App() {
return (
<div className="app">
<h1>Test build</h1> 
<WebcamCapture />
</div>
);
}
export default App;

chrome控制台中显示的错误代码如下：

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

这是我对这个问题的最佳猜测。这是导致decorations为null的第一个问题。完整的错误堆栈跟踪可以在这里找到：https://pastebin.com/UKQm9TYi

包.json看起来像这样，

{
"name": "snapchat-clone",
"version": "0.1.0",
"private": true,
"dependencies": {
"@mui/base": "^5.0.0-alpha.91",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.9.2",
"@reduxjs/toolkit": "^1.8.3",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^14.3.0",
"react": "^16.8.0",
"react-dom": "16.8.0",
"react-redux": "^8.0.2",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

据我所知，React和渲染器是匹配的版本，我没有违反挂钩规则(最暂定的。

我是React和Node.JS的新手，所以欢迎任何反馈或批评。谢谢你抽出时间。

Answer 1

我发现了问题的症结所在。在package.json中有一个缺失的依赖项，直到我将代码放入沙箱中才注意到。

具体来说，是

"@mui/icons-material": "5.8.4",