变量已定义但从未使用警告 javascript

Question

您好，我正在 React 中创建一个登录页面，并通过 <Component.Provider value={} /> 方法将变量和登录函数发送到其他文件，但它没有注册我指的是上面的变量。我该如何解决？

注意：state已最小化，但应该是

var state = {
    token: null,
    userId: null,
};

编辑：根据要求在文本中警告

代码：

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 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

Answer 1

这里有两个问题：

react 中的组件使用不正确
上下文使用不正确API

您应该使用 class 组件来使用它的方法，例如 this.setState。

但是你将它用于功能组件。

https://reactjs.org/docs/hooks-intro.html

https://reactjs.org/docs/components-and-props.html#function-and-class-components

https://reactjs.org/docs/context.html#contextprovider

P.S。如果你想将数据传输到子组件，在那里将使用它 - 使用 props。

变量已定义但从未使用警告 javascript

Variable is defined but never used warning javascript

javascript

reactjs

react-component