（免責宣告 - 我是菜鳥）我在嘗試將電容器設備 API 實施到我的 Ionic React 專案中時遇到了一個問題。傳遞給我的 DeviceView 函式的道具 (mobileInfo) 未定義。任何人都可以解釋為什么會這樣嗎？
設備容器.tsx *
import {Component} from "react";
import DeviceView from './DeviceView';
import React, { useEffect, useState } from 'react';
import { Device } from '@capacitor/device';
export class DeviceContainer extends React.Component {
state: { mobileInfo: string }
constructor(props: any) {
super(props)
this.state =
{
mobileInfo: "",
}
}
async getDeviceInfo (){
const info = Device.getInfo();
this.setState({
mobileInfo: JSON.stringify(info)
});
}
componentDidMount() {
this.getDeviceInfo();
}
render() {
return (
<DeviceView
mobileInfo={this.state.mobileInfo}
/>
)
}
}
export default DeviceContainer;
設備視圖.tsx *
import React from 'react'
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import DeviceContainer from './DeviceContainer'
import { RouteComponentProps } from 'react-router';
const DeviceView = ({ mobileInfo }: any) => {
if (mobileInfo !== undefined) {
console.log('prop was passed');
} else {
console.log('prop was NOT passed');
}
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Device Info</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<div>
<div>
Mobile Info: {mobileInfo}
</div>
</div>
</IonContent>
</IonPage>
)
}
export default DeviceView;
我期待 DeviceView.tsx 使用 mobileInfo 道具顯示用戶設備資訊。
uj5u.com熱心網友回復：
嘗試await Device.getInfo()，因為此方法是異步的。
async getDeviceInfo(){
const info = await Device.getInfo();
console.log('---info', info)
this.setState({
mobileInfo: JSON.stringify(info)
});
}
async componentDidMount() {
await this.getDeviceInfo();
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/527580.html
標籤：反应打字稿离子框架电容器