首页 > 解决方案 > 热重载不适用于干净的反应项目?

问题描述

今天是我使用 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”,并按预期工作。我猜这与反应版本有关

标签: javascriptreactjs

解决方案


创建 .env 文件并添加 FAST_REFRESH=false


推荐阅读