在 useEffect 中使用 useState 时 Map 不是函数

Question

我有一个简单的应用程序，它请求 API 以检索订单。它是带有打字稿的反应功能组件。

我只想显示所有广告的描述。我在这里查看了许多教程和线程，并使用 更改状态useEffect，其中包含函数，该函数从 API 请求数据并将其传递给useState。

一开始，我认为useEffect在父级中使用 useState 并将 props 中的广告传递给子级就足够了。

后来我在子（）文件中做了同样的事情GeneralAdvert.ts，但我仍然有同样的错误：

×

TypeError: adverts.map is not a function

GeneralAdvert

D:/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> 

  }

Answer 1

我认为你必须这样做，adverts.items.map因为result是一个对象{item: array}，所以你想访问对象的数组（值）。您可以：adverts.items.map或者setAdverts(result.items)

Answer 2

看起来您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应该修复错误