[英]how to get, by a get from axios, data in useState with react functionnal component
我正在研究 jhipster 生成的反應項目。 當我從我的 rest api 執行獲取請求時。
GET http://localhost:8080/api/account
Accept: */*
Cache-Control: no-cache
Authorization: Bearer bearerValue
我得到這個答案:
HTTP/1.1 200 OK
Expires: 0
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
X-XSS-Protection: 1; mode=block
Pragma: no-cache
X-Frame-Options: DENY
Referrer-Policy: strict-origin-when-cross-origin
Content-Security-Policy: default-src 'self'; frame-src 'self' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://storage.googleapis.com; style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; img-src 'self' data:; font-src 'self' https://fonts.gstatic.com data:
Date: Sun, 05 Apr 2020 18:26:07 GMT
Connection: keep-alive
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
Feature-Policy: geolocation 'none'; midi 'none'; sync-xhr 'none'; microphone 'none'; camera 'none'; magnetometer 'none'; gyroscope 'none'; speaker 'none'; fullscreen 'self'; payment 'none'
Transfer-Encoding: chunked
Content-Type: application/json
{
"id": 3,
"login": "admin",
"firstName": "Administrator",
"lastName": "Administrator",
"email": "admin@localhost",
"imageUrl": "",
"activated": true,
"langKey": "fr",
"createdBy": "system",
"createdDate": null,
"lastModifiedBy": "system",
"lastModifiedDate": null,
"authorities": [
"ROLE_USER",
"ROLE_ADMIN"
]
}
這意味着 API 沒問題。 我的問題是我怎樣才能從我的 state 中的 axios promise 獲得結果,只執行一個請求。
這是我嘗試繼續的方法。
投資組合.tsx
export interface IPortfolioProps extends StateProps,
DispatchProps,
RouteComponentProps<{ url: string }> {
}
export interface AccountState {
id: number,
login: string,
firstName: string,
lastName: string,
email: string,
imageUrl: string,
activated: boolean,
langKey: string,
createdBy: string,
createdDate: string,
lastModifiedBy: string,
lastModifiedDate: string,
authorities: Array<string>
}
export const Portfolio = (props: IPortfolioProps) => {
const currentAccountState = async (): Promise<AccountState> => {
return await axios.get<AccountState>(`/api/account`)
.then((response) => {
return response.data
});
};
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
const isAdmin: boolean = () => {
let as: AccountState;
currentAccountState()
.then(response => {
as = response;
// eslint-disable-next-line no-console
console.log('as : ', as);
return as.authorities.find(
authority => authority === AUTHORITIES.ADMIN) !== undefined;
});
};
const [admin, setAdmin] = useState(isAdmin);
return (
<div>
{`admin : ${admin}`}
</div>);
}
運行應用程序時,我總是在屏幕上顯示“管理員:未定義”,而我的控制台登錄顯示正確的帳戶預期帳戶。 我想要保存為 state boolean 答案是當前用戶是管理員,在管理員 state 中。
我認為這是因為admin
沒有默認值,所以admin
在您從 API 收到響應之前首次呈現頁面時undefined
。 最好先用默認值初始化它,在掛載時調用 API,然后用響應更新 state。
您可以嘗試以下方法:
const [admin, setAdmin] = useState(null);
useEffect(() => {
if (!admin) {
const currentAccountState = async (): Promise<AccountState> => {
return await axios.get<AccountState>(`/api/account`)
.then((response) => {
return response.data
});
};
currentAccountState()
.then(response => {
console.log('as : ', response );
// probably add better handling here in the case that there is no result in the find, otherwise you mightrun into the same issue if admin is undefined again
setAdmin(response.authorities.find(authority => authority === AUTHORITIES.ADMIN) !== undefined);
});
}
}, [admin])
return (
<div>
{`admin : ${admin}`}
</div>
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.