javascript - 热重载不适用于干净的反应项目?
问题描述
今天是我使用 React v17 制作的第一个项目(不管这是否重要),我正在更改 state、dom 等中的内容,并且不会像以前那样重新加载任何内容。通常,当您在状态下按 ctrl+s 保存某些内容并且它消失时,您会注意到它,但现在它不再发生了。
有什么我可以检查一下我做错了什么吗?只是一个使用 Create react app 创建的项目,干净。
这就是我所拥有的,https://github.com/StewartGF/todo-test
对于上下文,我正在做的是更改代码中的状态,期望从页面重新加载。
改变状态:
const initialState = [
{
id: Date.now(),
task: "Crear un todo ",
completed: true,
}
];
const todoReducer = (state = initialState, action) => {
switch (action.type) {
case "ADD_TODO":
return [...state, action.payload];
default:
return state;
}
};
export default todoReducer;
至
const initialState = [
{
id: Date.now(),
task: "Crear un todo ",
completed: true,
},
{
id: Date.now(),
task: "Crear un todo ",
completed: true,
},
];
const todoReducer = (state = initialState, action) => {
switch (action.type) {
case "ADD_TODO":
return [...state, action.payload];
default:
return state;
}
};
export default todoReducer;
通常您希望页面以新状态重新加载。
控制台没有错误。我唯一知道的与我拥有的其他项目(测试以确认是否使用 VSCode 或其他东西)不同的是 react 的版本。
不起作用的 Package.json 项目:
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.5",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.1",
"react-scripts": "4.0.0",
"redux": "^4.0.5",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
在此之前创建的其他项目
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
"react-scripts": "3.4.3",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"uuid": "^8.3.0"
},
"scripts": {
"start": "npm run watch:css && react-scripts start",
"build": "npm run build:css && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
"watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
},
"eslintConfig": {
"extends": "react-app"
},
编辑:将依赖关系从 React 17 降级为“react”:“^16.13.1”,并按预期工作。我猜这与反应版本有关
解决方案
创建 .env 文件并添加 FAST_REFRESH=false