[英]Variable is defined but never used warning javascript
Hi I'm making a login page in react and am sending the variables and login functions down to other files through <Component.Provider value={} />
method but it is not registering that I'm referring to variables above.您好,我正在 React 中创建一个登录页面,并通过
<Component.Provider value={} />
方法将变量和登录函数发送到其他文件,但它没有注册我指的是上面的变量。 How do I fix that?我该如何解决?
Note: state
is minimised but should be注意:
state
已最小化,但应为
var state = {
token: null,
userId: null,
};
Edit: Warning in text according to request编辑:根据要求在文本中发出警告
Code:代码:
import React, { Component } from 'react';
import { BrowserRouter, Route} from 'react-router-dom';
import {Routes} from 'react-router-dom';
import {Navigate} from 'react-router-dom';
// import {Routes} from 'react-router-dom';
import './App.css';
import AuthPage from './pages/Auth';
import EventsPage from './pages/Events';
import BookingsPage from './pages/Bookings';
import MainNavigation from './components/Navigation/MainNavigation';
import AuthContext from './context/auth-context';
function App() {
var state = {
token: null,
userId: null,
};
function login(token, userId, tokenExpiration) {
this.setState({token: token, userId: userId});
};
function logout() {
this.setState({token: null, userId: null})
};
return (
<BrowserRouter>
<React.Fragment>
<AuthContext.Provider value={{ token: this.state.token, userId: this.state.userId, login: this.login, logout: this.logout }}>
<MainNavigation />
<main className="main-content">
<Routes>
<Route path="/" element={<Navigate to="/auth" replace={true}/>} />
<Route path="/auth" element={<AuthPage />} />
<Route path="/events" element={<EventsPage/>} />
<Route path="/bookings" element={<BookingsPage/>} />
</Routes>
</main>
</AuthContext.Provider>
</React.Fragment>
</BrowserRouter>
);
}
export default App;
Warning:警告:
WARNING in src\App.js
Line 1:17: 'Component' is defined but never used no-unused-vars
Line 16:10: 'state' is assigned a value but never used no-unused-vars
Line 20:14: 'login' is defined but never used no-unused-vars
Line 23:14: 'logout' is defined but never used no-unused-vars
webpack compiled with 1 warning
There are two problems here:这里有两个问题:
You should use class component to use its methods like this.setState
.您应该使用 class 组件来使用它的方法,例如
this.setState
。
But you use this for functional component.但是您将其用于功能组件。
https://reactjs.org/docs/hooks-intro.html https://reactjs.org/docs/hooks-intro.html
https://reactjs.org/docs/components-and-props.html#function-and-class-components https://reactjs.org/docs/components-and-props.html#function-and-class-components
https://reactjs.org/docs/context.html#contextprovider https://reactjs.org/docs/context.html#contextprovider
PS If you want to transfer data to a child component, where it will be used - use props. PS 如果你想将数据传输到子组件,它将被使用 - 使用道具。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.