在useEffect中使用useState时，地图不是函数

Question

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

我只想显示所有广告的描述。 我检查了许多教程，也在这里进行了讨论，并使用useEffect更改了状态，其中包含函数，该函数从API请求数据并通过useState传递数据。

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

后来我在子（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> 

  }

  export default GeneralAdvert;

这是简单的功能：

async getAdvertAsync(): Promise<Advert[]> {
   let q: Advert[];
        
    let x = await this.syncService.apiAsync<Advert>("http://localhost:7071/api/getPerson");
    q = x;

    return q;
}

从console.log：

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

应纠正错误

Answer 3

抱歉，没有足够的时间来正确阅读，但是.map用于数组，因此您可能需要返回的JSON需要.parse（）。