Javascript 访问以前存储在React组件状态下的数据时出现问题

我正在尝试使用Axios和useReducer钩子实现无限滚动。我从GIPHY API接收到的数据很好，但问题是，当我在视口的底部获得数据时，新的GIF只是替换最初加载到网页上的GIF，而不是为它们创建新的容器

我知道，我的映射方法或设置交叉点观察者以触发下一个GIF的get请求的方式没有问题。我正在使用useReducer存储以前的状态，并将附加的gif添加到原始状态

我不断收到错误“TypeError:undefined不是对象（评估'gifs.data.map'）” 有鉴于此，我认为我是在对API的响应进行变异，将其放入一个额外的数组中以存储以前的数据，但不存储任何数据

以下是来自减速器的代码：

else if(action.type === 'success') {
  return {
    ...state,
    loading: false,
    data: prevData => {
      return [...prevData, action.res.data]
  }
}

以下是我的映射方法：

<div className='infinite-scroll-gifs'>
  {gifs.data.map((gif, index) => {
    if(gifs.data.length === index + 1) {
      return (
        <div ref={infiniteScrollTriggerRef} key={gif.id}>
          <img src={gif.images.fixed_height.url} alt='Random GIF'></img>
        </div>
      )
    }
  }}

---

这是我关于堆栈溢出的第一个问题，四天来我一直在努力解决这个问题，哈哈。如果任何人有任何想法，我可以做什么可能的工作，请让我知道！非常感谢您的帮助。

我认为问题在于您如何向

useReducer

提供初始数据

常量MyComponent=（）=>{
const[state，dispatch]=useReducer（gifReducer，initialState）；
}

在initialState变量中，您需要为您的状态提供默认值

const initialState={
gifs:[]，
加载：错误
}

这样，在渲染GIF时，它将不会通过未定义的错误

同样在

函数中，您也可以给出默认值

我认为这应该可以纠正错误。或者，请为您的
JSX
和
reducer
函数粘贴完整的代码。
您什么时候收到？你确定定义了
data
或甚至
gif
吗？是的，如果我不尝试使用数据存储以前的帖子和新帖子，我可以显示数据：prevData=>{return[…prevData，action.res.data]}只有当我使用函数状态将以前的数据与新数据一起存储时，我才会收到错误。我最初认为这是因为我通过添加一个额外的数组来改变从API返回的对象的形状，但我更改了我的代码来说明这一点，什么也没有。你能分享更多的代码吗？我们甚至看不到GIF的来源。或者更好的是，创建一个运行的示例。是的，绝对。如果您遵循此链接，您可以看到完整的代码。您好，首先感谢您的回答！我只是尝试在我的减速器中使用一个初始状态变量，但它没有改变任何东西。在我的RandomGIF组件中，我使用从reducer返回的数据作为const{loading，error，data:gifs}=usefinitiescroll（url）。由于字符限制，我无法将所有代码放入注释中，但如果您有时间查看，我已经用完整的JSX发布了一篇新文章：
{
  "data":
    [
      {
        gifData
      },
      {
        gifData
      },
      {
        gifData
      }
    ]
}