React中对GIPHY接口返回数据执行filter/map时报TypeError不是函数如何解决

问题根因 #

GIPHY 接口返回的响应体是外层对象结构，你需要的GIF列表数组实际存放在响应体的data属性下。你当前直接将整个响应对象存入了初始为数组类型的gifdata状态，导致后续调用数组专属的filter方法时触发「不是函数」的类型错误。

修复方法 #

修改useEffect回调内的状态赋值逻辑，从响应对象中取出data字段的数组存入状态即可，修改后的代码如下：

useEffect(()=> {
    axios.get(`https://api.giphy.com/v1/gifs/trending?api_key=nKEFKPSILLeIlqLEjqhVsRO8ShxIjfcn&limit=50&rating=g`)
   .then(res=>{
       // 仅取出响应体内的GIF数组存入状态
       setGifdata(res.data.data)
       console.log(res.data.data)
   })
}, [])

可选优化 #

可以给数组操作增加可选链兜底，避免接口异常返回非预期值时页面崩溃：

// 搜索过滤逻辑增加可选链和空数组兜底
const filteringSearch = gifdata?.filter(gif=>
   gif.title.toLowerCase().includes(Search.toLowerCase())) || []

{/* 渲染逻辑增加可选链 */}
{filteringSearch?.map(gif => {
    return (
        <Gif 
        key = {gif.id} 
        gifImgSrc = {gif.images.original.webp}
        description = {gif.title}
        />
    )
})}

内容的提问来源于stack exchange，提问作者TheDejareDaniels