为什么我在尝试过滤或映射数组时不断收到 typeerror: not a function答案

【问题标题】：Why do i keep getting typeerror: not a function while trying to filter or map an array为什么我在尝试过滤或映射数组时不断收到 typeerror: not a function
【发布时间】：2021-12-01 16:29:10
【问题描述】：

所以，我正在尝试使用 useState 挂钩中存储的变量从 GIPHY api 过滤和映射一个数组。

这是我的代码

   const [gifdata, setGifdata] = useState([])
   const [Search, setSearch] = useState("")

   function handleChange(e) {
       setSearch(e.target.value)
   }

useEffect(()=> {
    axios.get(`https://api.giphy.com/v1/gifs/trending?api_key=nKEFKPSILLeIlqLEjqhVsRO8ShxIjfcn&limit=50&rating=g`)
   .then(res=>{
       setGifdata(res.data)
       console.log(res.data)
   })
}, [])

const filteringSearch = gifdata.filter(gif=>
   gif.title.toLowerCase().includes(Search.toLowerCase()))

   return (
       <div>
           <header className="bg-blue-600">
               <div className="logo">
                   <label htmlFor="logo">DejareX</label>
               </div>
           </header>
           <div className="heroSection mx-auto">
               <h1>GIF Collections at it's peak</h1>
               <p>loremipsum blah blah blah</p>
           
                   <input type="text" placeholder="Search For A GIF" onChange = {handleChange} />

                   {filteringSearch.map(gif => {
                       return (
                           <Gif 
                           key = {gif.id} 
                           gifImgSrc = {gif.images.original.webp}
                           description = {gif.title}
                           />
                       )
                   })}
       </div>
       </div>
   )
}

注意：创建了一个随机邮件地址来获取此 API 密钥，它不用于生产。 我是新来的反应，请尽量让我通过尽可能简单

有人说来自api的数据可能不是数组，我重新检查了一下，似乎是真的。因为它在进入数组之前首先返回一个对象，请谁可以帮助解决这个问题

【问题讨论】：

您会收到错误消息，因为gifdata 不是数组类型。当你console.log(res.data) 时你看到了什么？
res.data 可能不是数组。
它是一个数组，您可以复制api链接并直接在浏览器中查看。谢谢

标签： reactjs api error-handling react-hooks jsx

【解决方案1】：

正如我所说，res.data 不是数组。 axios 将另一个 data 层添加到结果中。所以你的res.data和你在浏览器中看到的不一样，其实是：

{data: Array(50), pagination: Object, meta: Object}

因此，将res.data 更改为res.data.data 即可解决问题

这是一个假人`Live Demo`

【讨论】：

这是一个假人Live Demo

这是一个假人`Live Demo`