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

编程问答 2022-08-10

问题描述

我目前正在研究大学的最后一个项目的反应，遇到一些我不知道它是否正常的问题。

错误是：

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

显然，我每次启动react应用程序时都必须清除缓存。 正常吗？恐怕到我将此网站上线时，它将仍然无法被用户访问。否则只会在本地主机上这样？而webpack与这有什么关系？

在此先感谢您，这是我有史以来第一个要问的问题。

（（编辑1）） 这是错误中提到的代码

（loginReducer.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
  });

（index.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'));

解决方法

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

编辑： 看来您打算对无效的JSON格式进行from django.db import models from django.contrib.auth.models import User # Create your models here. class Customer(models.Model): user = models.OneToOneField(User,on_delete=models.CASCADE,null=True,blank=True) name = models.CharField(max_length=200,null=True) email = models.CharField(max_length=200,null=True) def __str__(self): return self.name ，您能检查一下JSON.parse里面是什么吗？ 它可能是空字符串，导致localStorage.getItem('user')导致代码崩溃。

browser-cachecachingcachinghtmlreactjsreactjsreactjsreactjswebpackwebpackwebpack