列印陣列項的最佳方法是什么？它回傳錯誤“'never[]' 型別上不存在屬性 'post_title'”。
如何使用介面來定義這些變數并在代碼中為 aboutData 和執行陣列項使用它們。
API 回應
{
"aboutData": {
"post_id": 18,
"post_title": "Established since 2014",
},
"executive": [
{
"post_id": 39,
"post_title": "Quality and excellence in everything we do.",
},
],
}
這是組件檔案：
const About: React.FC = () => {
const history = useHistory();
const [showLoading, setShowLoading] = useState(true);
const { authValues, setAuthValues } = React.useContext(userContext);
const [data, setData] = useState([]);
React.useEffect(() => {
getAbout();
}, []);
const getAbout = async () => {
setShowLoading(true);
return api
.getabout()
.then((response) => {
setData(response.data.data);
console.log(response.data.data);
})
.catch((error) => {
console.log(error);
});
};
return (
<IonPage>
<IonContent fullscreen>
<IonCard>
<IonCardContent>
<IonList className="dash_grid">
<IonItem>
<IonLabel>{data.aboutData.post_title}</IonLabel>
</IonItem>
</IonList>
<IonList color="primary" className="history_box">
{data.executive.length > 0 ? (
data.executive.map((exec) => {
return (
<IonItem>
<IonText color="medium">{exec.post_title}</IonText>
</IonItem>
);
})
) : null}
</IonList>
</IonCardContent>
</IonCard>
</IonContent>
</IonPage>
);
};
export default About;
uj5u.com熱心網友回復：
使用地圖“？”時應該添加可選鏈接。在資料之后添加它。
{data?.executive.length > 0 ? (
data?.executive.map((exec) => {
uj5u.com熱心網友回復：
你data以錯誤的方式啟動你的。那不是一個陣列。改成這個
const [data, setData] = useState(null); ... if(!data) return null; // you can handle the loading page here when data is not ready yet return ( ... )
uj5u.com熱心網友回復：
[]在 TypeScript 中自動推斷為never[]：
const [data, setData] = useState([]); // useState<never[]>([]);
// ^^ never[]
所以你必須告訴 TypeScript 它不是（謝天謝地 useState 接受泛型）：
const [data, setData] = useState<{ post_id: number; post_title: string }>([]); // good
但為了便于閱讀，請使用介面：
interface PostData { post_id: number; post_title: string }
const [data, setData] = useState<PostData[]>([]);
uj5u.com熱心網友回復：
如果您期望根據 API 回應的物件，則需要使用空物件而不是陣列來初始化 useState({})
const [data, setData] = useState({});
然后您必須檢查該物件是否具有您在這一行中所期望的屬性：
<IonLabel>{data?.aboutData?.post_title}</IonLabel>
您可以為此部分使用可選鏈接。而且對于這條線，請注意屬性
{data?.executive?.length > 0 ? (
取決于您嘗試做什么，我建議您根據資料內容有條件地繪制串列。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/429984.html