Javascript “如何修复警告消息”；Can'；t对未安装的组件执行React状态更新"；？
我正在编写一个自定义应用程序，通过在线教程进行调整。这是Udemy MERN Stack课程。然而，当我进行用户身份验证、验证和注销时，我发现每次注销当前用户时都会收到一个持续的警告。它警告我：Javascript “如何修复警告消息”；Can'；t对未安装的组件执行React状态更新"；？,javascript,reactjs,authentication,Javascript,Reactjs,Authentication,我正在编写一个自定义应用程序，通过在线教程进行调整。这是Udemy MERN Stack课程。然而，当我进行用户身份验证、验证和注销时，我发现每次注销当前用户时都会收到一个持续的警告。它警告我： index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application.
index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
in LandingPage (at PrivateRoute.js:8)
LandingPage.jsprivateroutimport React, { useState, useEffect } from 'react';
import { Grid, Typography, CardContent, Card } from '@material-ui/core';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import MusicCard from '../ui/MusicCard/MusicCard';
//import useMediaQuery from "@material-ui/core/useMediaQuery";
import axios from 'axios';
import AudioControl from '../layout/AudioControl/AudioControl';
const useStyles = makeStyles(theme => ({
root:{
height: 200,
overflowX: "auto",
},
spotifyArt: {
width: 600,
height: 600,
marginBottom: "4em",
[theme.breakpoints.down('lg')]: {
width: 540,
height: 540,
},
[theme.breakpoints.down('md')]: {
width: 440,
height: 440,
},
boxShadow: "0 0 46px 0 rgba(255, 203, 25, 0.3)"
},
words: {
fontSize: "1.3em",
marginBottom: "1.1em",
marginLeft: "0.7em",
color: "#ffffff"
},
description: {
fontSize: "1.3em",
color: "#ffffff",
opacity: "0.6"
},
mainCard: {
marginLeft: "3em",
color: "#ffffff",
backgroundColor: "#14213d",
marginBottom: "5em"
},
weekDay: {
marginBottom: "0.7em",
color: "#ffffff"
},
title: {
color: "#ffffff",
margin: "0.5em 0 0.5em 0"
},
content: {
marginTop: "3em",
[theme.breakpoints.down('lg')]: {
marginTop: "3em",
},
[theme.breakpoints.down('md')]: {
marginTop: "7em",
}
},
textOverlay: {
position: 'absolute',
color: "red",
fontSize: '15px'
}
}));
const LandingPage = () => {
const classes = useStyles();
//const theme = useTheme();
//const matches = useMediaQuery(theme.breakpoints.down('md'));
const [formData, setFormData] = useState({
name: '',
artist: '',
album: '',
duration: '',
image: '',
url: '',
day: null
});
const [numberCharts, setNumberCharts] = useState({
numberOne: {
name: null,
artist: null
},
numberTwo: {
name: null,
artist: null
},
numberThree: {
name: null,
artist: null
},
numberFour: {
name: null,
artist: null
},
numberFive: {
name: null,
artist: null
},
numberSix: {
name: null,
artist: null
},
numberSeven: {
name: null,
artist: null
}
});
const [hiddenField, setHiddenField] = useState([]);
useEffect(() => {
axios.post("/")
.then(res => {
console.log(res);
switch(new Date().getDay()){
case 0:
setHiddenField([true, false, false, false, false, false, false])
break;
case 1:
setHiddenField([true, true, false, false, false, false, false])
break;
case 2:
setHiddenField([true, true, true, false, false, false, false])
break;
case 3:
setHiddenField([true, true, true, true, false, false, false])
break;
case 4:
setHiddenField([true, true, true, true, true, false, false])
break;
case 5:
setHiddenField([true, true, true, true, true, true, false])
break;
case 6:
setHiddenField([true, true, true, true, true, true, true])
break;
default:
console.log("default");
setHiddenField([false, false, false, false, false, false, false])
break;
}
let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let dayOfWeek = days[new Date().getDay()];
console.log("URL",res.data.url);
setFormData({
name: res.data.name,
artist: res.data.artist,
album: res.data.album,
duration: res.data.duration,
image: res.data.image,
url: res.data.url,
day: dayOfWeek
});
setNumberCharts({
numberOne: {
name: res.data.topFive.numberOne.name,
artist: res.data.topFive.numberOne.artist
},
numberTwo: {
name: res.data.topFive.numberTwo.name,
artist: res.data.topFive.numberTwo.artist
},
numberThree: {
name: res.data.topFive.numberThree.name,
artist: res.data.topFive.numberThree.artist
},
numberFour: {
name: res.data.topFive.numberFour.name,
artist: res.data.topFive.numberFour.artist
},
numberFive: {
name: res.data.topFive.numberFive.name,
artist: res.data.topFive.numberFive.artist
},
numberSix: {
name: res.data.topFive.numberSix.name,
artist: res.data.topFive.numberSix.artist
},
numberSeven: {
name: res.data.topFive.numberSeven.name,
artist: res.data.topFive.numberSeven.artist
}
});
})
.catch(err => {
console.error(err.message);
});
}, []);
//Code for dynamically showing 7 day week
let starter = new Date().getDay();
let sevenDayAry = [];
for (let i = 0; i < 7 ; i++) {
if(starter === 7){
starter = 0;
}
sevenDayAry[i] = starter;
starter = starter + 1;
}
return (
<React.Fragment>
<Grid container direction="row" alignItems="center" justify="center" className={classes.content}>
<Grid item>
<img src={formData.image} alt="Spotify Cover" className={classes.spotifyArt} />
</Grid>
<Grid item>
<Card className={classes.mainCard}>
<CardContent>
<Typography variant="h4" align="center" className={classes.weekDay}>{formData.day}</Typography>
<Typography className={classes.description}>Song</Typography>
<Typography className={classes.words}>{formData.name}</Typography>
<Typography className={classes.description}>Artist</Typography>
<Typography className={classes.words}>{formData.artist}</Typography>
<Typography className={classes.description}>Preview</Typography>
<AudioControl url={formData.url} />
</CardContent>
</Card>
</Grid>
</Grid>
<Grid container direction="row" justify="center" alignItems="center" spacing={4}>
<Grid item>
<Typography variant="h4" className={classes.title}>7-Day Week</Typography>
</Grid>
</Grid>
<Grid container direction="row" spacing={4} className={classes.root} wrap="nowrap">
<Grid item>
<MusicCard day="Sunday" song={numberCharts.numberOne.name} artist={numberCharts.numberOne.artist} showContent={hiddenField[0]}/>
</Grid>
<Grid item >
<MusicCard day="Monday" song={numberCharts.numberTwo.name} artist={numberCharts.numberTwo.artist} showContent={hiddenField[1]}/>
</Grid>
<Grid item >
<MusicCard day="Tuesday" song={numberCharts.numberThree.name} artist={numberCharts.numberThree.artist} showContent={hiddenField[2]}/>
</Grid>
<Grid item >
<MusicCard day="Wednesday" song={numberCharts.numberFour.name} artist={numberCharts.numberFour.artist} showContent={hiddenField[3]}/>
</Grid>
<Grid item >
<MusicCard day="Thursday" song={numberCharts.numberFive.name} artist={numberCharts.numberFive.artist} showContent={hiddenField[4]}/>
</Grid>
<Grid item >
<MusicCard day="Friday" song={numberCharts.numberSix.name} artist={numberCharts.numberSix.artist} showContent={hiddenField[5]}/>
</Grid>
<Grid item >
<MusicCard day="Saturday" song={numberCharts.numberSeven.name} artist={numberCharts.numberSeven.artist} showContent={hiddenField[6]}/>
</Grid>
</Grid>
</React.Fragment>
);
}
export default LandingPage;
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
const PrivateRoute = ({
component: Component, auth: { isAuthenticated, loading }, ...rest }) => (
<Route { ...rest } render={props => !isAuthenticated && !loading ? (<Redirect to='/login' />) : (<Component { ...props } />) } />
)
PrivateRoute.propTypes = {
auth: PropTypes.object.isRequired
}
const mapStateToProps = state => ({
auth: state.auth
})
export default connect(mapStateToProps)(PrivateRoute);
import React, { Fragment, useEffect } from 'react';
import Landing from './components/layout/Landing';
import Register from './components/auth/Register';
import LandingPage from './components/layout/LandingPage';
import Login from './components/auth/Login';
import Alert from './components/layout/Alert';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
//Redux
import { Provider } from 'react-redux';
import store from './store';
import { loadUser } from './actions/auth';
import setAuthToken from './utils/setAuthToken';
import Header from './components/ui/Header/Header'
import PrivateRoute from './components/routing/PrivateRoute';
if(localStorage.token){
setAuthToken(localStorage.token);
}
const App = () => {
useEffect(() => {
store.dispatch(loadUser());
}, []);
return(
<Provider store={store}>
<Router>
<Fragment>
<Header />
<Route exact path="/" component={Landing}/>
<Alert />
<Switch>
<Route exact path="/register" component={Register}/>
<Route exact path="/login" component={Login}/>
<PrivateRoute exact path="/dashboard" component={LandingPage}/>
</Switch>
</Fragment>
</Router>
</Provider>
);
}
export default App;
import React，{useState，useffect}来自“React”；
从“@material ui/core”导入{网格、排版、卡片内容、卡片}；
从“@materialui/core/styles”导入{makeStyles，useTheme}；
从“../ui/MusicCard/MusicCard”导入MusicCard；
//从“@material ui/core/useMediaQuery”导入useMediaQuery；
从“axios”导入axios；
从“../layout/AudioControl/AudioControl”导入AudioControl；
const useStyles=makeStyles（主题=>({
根目录：{
身高：200，
overflowX:“自动”，
},
spotifyArt：{
宽度：600，
身高：600，
marginBottom：“4em”，
[主题.breakpoints.down（'lg'）：{
宽度：540，
身高：540，
},
[主题.breakpoints.down（'md'）]：{
宽度：440，
身高：440，
},
boxShadow:“0 46像素0 rgba（255、203、25、0.3）”
},
文字：{
fontSize：“1.3em”，
marginBottom：“1.1米”，
边缘左图：“0.7em”，
颜色：“ffffff”
},
说明：{
fontSize：“1.3em”，
颜色：“ffffff”，
不透明度：“0.6”
},
主卡：{
边缘左图：“3em”，
颜色：“ffffff”，
背景色：“14213d”，
marginBottom：“5em”
},
工作日：{
marginBottom：“0.7em”，
颜色：“ffffff”
},
标题：{
颜色：“ffffff”，
边距：“0.5em 0.5em 0”
},
内容：{
玛金托普：“3em”，
[主题.breakpoints.down（'lg'）：{
玛金托普：“3em”，
},
[主题.breakpoints.down（'md'）]：{
玛金托普：“7em”，
}
},
文本覆盖：{
位置：'绝对'，
颜色：“红色”，
字体大小：“15px”
}
}));
常数着陆页=（）=>{
const classes=useStyles（）；
//const theme=useTheme（）；
//const matches=useMediaQuery（theme.breakpoints.down（'md'）；
常量[formData，setFormData]=useState({
名称：“”，
艺术家：''，
相册：“”，
持续时间：“”，
图像：“”，
url:“”，
日期：空
});
常量[numberCharts，setNumberCharts]=useState({
号码：{
名称：空，
艺术家：空
},
编号二：{
名称：空，
艺术家：空
},
号码树：{
名称：空，
艺术家：空
},
数字四：{
名称：空，
艺术家：空
},
数字五：{
名称：空，
艺术家：空
},
编号X：{
名称：空，
艺术家：空
},
编号17：{
名称：空，
艺术家：空
}
});
const[hiddenField，setHiddenField]=useState（[]）；
useffect（（）=>{
axios.post（“/”）
。然后（res=>{
控制台日志（res）；
开关（新日期（）.getDay（））{
案例0：
setHiddenField（[true，false，false，false，false，false]）
打破
案例1：
setHiddenField（[true，true，false，false，false，false，false]）
打破
案例2：
setHiddenField（[true，true，true，false，false，false，false]）
打破
案例3：
setHiddenField（[true，true，true，true，false，false，false]）
打破
案例4：
setHiddenField（[true，true，true，true，true，false，false]）
打破
案例5：
setHiddenField（[true，true，true，true，true，true，false]）
打破
案例6：
setHiddenField（[true，true，true，true，true，true，true]）
打破
违约：
console.log（“默认”）；
setHiddenField（[false，false，false，false，false，false]）
打破
}
let days=[‘星期日’、‘星期一’、‘星期二’、‘星期三’、‘星期四’、‘星期五’、‘星期六’]；
让dayOfWeek=days[new Date（）.getDay（）]；
log（“URL”，res.data.URL）；
setFormData({
名称：res.data.name，
艺术家：res.data.artist，
唱片集：res.data.album，
持续时间：res.data.duration，
image:res.data.image，
url:res.data.url，
日期：星期五
});
setNumberCharts({
号码：{
名称：res.data.topFive.numberOne.name，
艺术家：res.data.topFive.numberOne.artist
},
编号二：{
名称：res.data.topFive.numberTwo.name，
艺人：res.data.topFive.numberTwo.artist
},
号码树：{
名称：res.data.topFive.numberThree.n