为什么我每次运行 react-app 都必须清除缓存

Question

我目前正在为我在大学的期末项目学习 react，我遇到了一些我不知道是否正常的问题。

错误是：

Uncaught SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse (<anonymous>)
at Module../src/redux/reducers/loginReducer.js (loginReducer.js:3)
at __webpack_require__ (bootstrap:784)
at fn (bootstrap:150)
at Module../src/redux/reducers/rootReducer.js (rootReducer.js:1)
at __webpack_require__ (bootstrap:784)
at fn (bootstrap:150)
at Module../src/index.js (config.js:1)
at __webpack_require__ (bootstrap:784)
at fn (bootstrap:150)
at Object.1 (types.js:1)
at __webpack_require__ (bootstrap:784)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1

显然，这个解决方案我只需要在每次启动反应应用程序时清除缓存。 这是正常的事情吗？ 恐怕当我将该网站上线时，用户将无法访问它。 或者它只会在本地主机上这样？？ webpack 与此有什么关系？

提前致谢，这是我第一次在这里提问。

((EDIT 1)) 这是错误中提到的代码

（登录Reducer.js）

import { userConstants } from '../types';

let user = JSON.parse(localStorage.getItem('user'));
const initialState = user ? 
    { loggedIn: true, user } : {};

export function authentication(state = initialState, action) {
  switch (action.type) {
    case userConstants.LOGIN_REQUEST:
      return {
        loggingIn: true,//state yang dikirim ke global, bisa diganti jg di reducer kalo dibutuhin di component lain
      };
    case userConstants.LOGIN_SUCCESS:
      return {
        loggedIn:true,
        user: action.user
      };
    case userConstants.LOGIN_FAILURE:
      return {};
    case userConstants.LOGOUT:
      return {};
    default:
      return state
  }
}

(rootReducer.js)

import {combineReducers} from 'redux';

//reducers
import {authentication} from './loginReducer';
import {register} from './registerReducer';


export const rootReducer = combineReducers({
    authentication,
    register
  });

（索引.js）

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {createStore, applyMiddleware} from 'redux';
import {Provider} from 'react-redux';
import {rootReducer} from './redux/reducers/rootReducer';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';

const loggerMiddleware = createLogger();

//store
const store = createStore(rootReducer,
    applyMiddleware(
        thunkMiddleware,
        loggerMiddleware
    ));

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('app'));

Answer 1

这里https://github.com/facebook/create-react-app/issues/7261有多种解决方案可以解决您的问题，其中一个可能对您有用，其他地方的人也建议这样做：从 C 中删除所有内容： \\Users\\username\\AppData\\Roaming\\npm-cache修复了问题

编辑：看起来你正在尝试对无效的 JSON 格式执行JSON.parse ，你能检查一下localStorage.getItem('user')里面有什么吗？ 它可能是空字符串并导致JSON.parse使您的代码崩溃。