給出的是一個有 3 頁的應用程式：
- “主頁”
- “私人頁面”
- “用戶管理頁面”
以及用于與后端通信的檔案：
- “管理動作.js”
成功登錄后，用戶被重定向到“PrivatPage”。在“PrivatPage”上，用戶可以訪問“UserManagementPage”。
隱私頁面.js
import React, {
Component
} from "react";
import LogoutButton from "./LogoutButton";
import UserManagementButton from "./UserManagementButton";
import ManagementSessionWidget from './UserManagementSessionWidget'
import UserManagementPage from './UserManagementPage'
import {
NavBar,
LinkContainer
} from 'react-router-bootstrap'
import Modal from "react-bootstrap/Modal";
import Form from "react-bootstrap/Form";
import {
BrowserRouter as Router,
Routes,
Route,
Link
} from "react-router-dom";
import Button from "react-bootstrap/Button"
class PrivatePage extends Component {
render() {
return (
<
div className = "page-content"
id = "PrivatePage"
style = {
{
background: 'white'
}
} >
<
br / > Private Page <
br / >
<
Router >
<
Button > < Link to = "/user"
id = "OpenUserManagementButton" >
<
i className = "fa fa-user mr-2 fa-fw activityBarItem" > <
/i>UserManagement</Link > < /Button> <
Routes >
<
Route path = "/user"
element = {
< UserManagementPage / >
}
/>
<
/Routes> <
/Router>
<
/div>
)
}
}
export default PrivatePage
但是，當“UserManagementPage”打開時，后端資料應該出現在頁面上。訪問后端資料有效。該“ManagementAction.js”檔案被用于此目的
ManagementAction.js
export function showallUser(){
console.log("Show all Users")
return dispatch => {
dispatch(getShowUserManagementAction());
showUser().then(userSession => { const action= getShowUserManagementActionSuccess(userSession);
dispatch(action);}, error => {dispatch(getShowUserManagementErrorAction(error));}).catch(error=> {dispatch(getShowUserManagementErrorAction(error));})
}
}
function showUser() {
const hash="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySUQiOiJhZG1pbiIsImlzQWRtaW5pc3RyYXRvciI6dHJ1ZSwidXNlck5hbWUiOiJEZWZhdWx0IEFkbWluaXN0cmF0b3IgQWNjb3VudCIsImV4cGlyZXMiOjE2NDE1NjgyNzgxNDUsImlhdCI6MTY0MTU2Nzk3OH0.mJff9nuqgHXZVQfWbjeWed3JIRAm2N2s0CYpnXoMyv4"
const requestOptions = {
method: 'GET',
headers: { 'Authorization': `Basic ${hash}` },
};
return fetch('https://localhost:443/user/', requestOptions)
.then(handleResponse)
.then(userSession => {
return userSession;
});
}
我還嘗試在 axios 模塊的幫助下從“UserManagementPage”上的 API 獲取資料。只有資料不再到達，console.log輸出回傳一個空陣列。
class UserManagementPage extends Component {
constructor(props) {
super(props);
this.state = {userList: []}
}
async componentDidMount() {
console.log("I will get called once the page gets loaded");
const hash="whatever"
const requestOptions = {
method: 'GET',
headers: { 'Authorization': `Basic ${hash}` },
};
const response = await axios.get('https://localhost:443/user/', requestOptions);
this.setState({ userList: response.data.results });
console.log(this.state.userList)
}}
我現在如何將資料映射到“UserManagementPage”？
uj5u.com熱心網友回復：
要從UserManagementPage.js 中的后端獲取資料，您應該使用useEffect鉤子，您將在其中呼叫函式showUser或showAllUser。
這是檔案的鏈接：https : //reactjs.org/docs/hooks-effect.html
uj5u.com熱心網友回復：
在我看來，您所在州的大小寫不匹配？您將其初始化為userlist，然后在鍵下設定狀態userList。控制臺日志回傳一個空陣列，因為您初始化的狀態變數永遠不會更新。
uj5u.com熱心網友回復：
通過以下方法成功從 API 獲取資料：
getUsersData() {
const hash="whatever"
const requestOptions = {
method: 'GET',
headers: { 'Authorization': `Basic ${hash}` },
};
axios
.get('https://localhost:443/user/', requestOptions)
.then(res => {
const data = res.data
console.log(data)
const users = data.map(u =>
<div>
<p>{u.userID}</p>
</div>
)
this.setState({
users
})
})
.catch((error) => {
console.log(error)
})
}
componentDidMount(){
this.getUsersData()
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/408735.html
標籤：