qq_笑_17
2023-02-17 17:30:58
我有一個簡單的應(yīng)用程序,它請求 API 以檢索訂單。它是帶有打字稿的反應(yīng)功能組件。我只想顯示所有廣告的描述。我在這里查看了許多教程和線程,并使用 更改狀態(tài)useEffect,其中包含函數(shù),該函數(shù)從 API 請求數(shù)據(jù)并將其傳遞給useState。一開始,我認(rèn)為useEffect在父級中使用 useState 并將 props 中的廣告?zhèn)鬟f給子級就足夠了。后來我在子()文件中做了同樣的事情GeneralAdvert.ts,但我仍然有同樣的錯誤:×TypeError: adverts.map is not a functionGeneralAdvertD:/reactPhoraTS/reactapp/src/components/Adverts/GeneralAdvert.tsx:19 16 | }); 17 | 18 | > 19 | return <div> | ^ 20 | { 21 | adverts.map(advert=> ( 22 | <p key={advert._id}> {advert.desc} </p>這是父母:import React, { useState, useEffect } from 'react';import GeneralAdvert from './components/Adverts/GeneralAdvert';import FunctionService from './Services/FunctionService';import Advert from './Entities/Advert';import IAdvert from './Entities/IAdvert';const fs = new FunctionService();function App() { let [adverts, setAdverts] = useState<Advert[]>([]); useEffect(() => { const fetchAdverts = async () =>{ const result = await fs.getAdvertAsync(); console.log(result) setAdverts(result); } fetchAdverts(); },[]); return ( <div className="App"> <GeneralAdvert items={adverts}/> </div> );}export default App;這是孩子:import React, { useState, useEffect } from 'react';import Advert from '../../Entities/Advert';import IAdvert from '../../Entities/IAdvert';interface IGeneralAdvert { items: Array<Advert> } function GeneralAdvert(props:IGeneralAdvert) { const [adverts, setAdverts] = useState<Advert[]>([]); useEffect(() => { console.log(props.items) setAdverts(props.items); }); return <div> { adverts.map(advert=> ( <p key={advert._id}> {advert.desc} </p> ))} </div> //tried at the beggining with using just props.items //and without setAdvert in useEffet() here, but he same outcome // <div> // {props.items.map(x => <h2>{x.desc}</h2>)} // </div> }
2 回答
holdtom
TA貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超10個贊
我認(rèn)為你必須這樣做,adverts.items.map因?yàn)?code>result是一個對象{item: array},所以你想訪問對象的數(shù)組(值)。
您可以:
adverts.items.map
或者
setAdverts(result.items)
鴻蒙傳說
TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個贊
看起來您result存儲的是一個對象,而不是導(dǎo)致錯誤的數(shù)組。查看日志,看起來您想使用result.items而不是result
所以改變這個
const result = await fs.getAdvertAsync();
console.log(result)
setAdverts(result);
對此
const result = await fs.getAdvertAsync();
console.log(result)
setAdverts(result.items); // Access the `items` property
應(yīng)該修復(fù)錯誤
添加回答
舉報
0/150
提交
取消
