亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 useEffect 中使用 useState 時 Map 不是函數

在 useEffect 中使用 useState 時 Map 不是函數

qq_笑_17 2023-02-17 17:30:58
我有一個簡單的應用程序,它請求 API 以檢索訂單。它是帶有打字稿的反應功能組件。我只想顯示所有廣告的描述。我在這里查看了許多教程和線程,并使用 更改狀態useEffect,其中包含函數,該函數從 API 請求數據并將其傳遞給useState。一開始,我認為useEffect在父級中使用 useState 并將 props 中的廣告傳遞給子級就足夠了。后來我在子()文件中做了同樣的事情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貢獻1805條經驗 獲得超10個贊

我認為你必須這樣做,adverts.items.map因為result是一個對象{item: array},所以你想訪問對象的數組(值)。

您可以:

adverts.items.map

或者

setAdverts(result.items)


查看完整回答
反對 回復 2023-02-17
?
鴻蒙傳說

TA貢獻1865條經驗 獲得超7個贊

看起來您result存儲的是一個對象,而不是導致錯誤的數組。查看日志,看起來您想使用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

應該修復錯誤


查看完整回答
反對 回復 2023-02-17
  • 2 回答
  • 0 關注
  • 252 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號