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

Question

我有一个简单的应用程序，它请求 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>   }

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

应该修复错误