嗨，我正在創建一個登錄頁面，并通過<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
uj5u.com熱心網友回復：
這里有兩個問題：
- 反應中的組件使用不正確
- 背景關系 API 的錯誤使用
您應該使用類組件來使用其方法，例如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
PS 如果您想將資料傳輸到子組件，將在其中使用它 - 使用道具。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/466845.html
標籤：javascript 反应 反应组件