访问存储在 React 组件状态中的先前数据的问题

Question

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

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

我不断收到错误“TypeError: undefined is not an object (evalating 'gifs.data.map')” 有鉴于此，我认为我正在改变来自 API 的响应，将其放入一个额外的数组中以存储以前的数据，但没有雪茄。

这是reducer的代码：

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>
      )
    }
  }}

GIPHY API 返回的对象的形状如下：

{
  "data":
    [
      {
        gifData
      },
      {
        gifData
      },
      {
        gifData
      }
    ]
}

这是我关于 Stack Overflow 的第一个问题，我已经尝试解决了四天，哈哈。如果有人知道我可以做些什么来工作，请告诉我！非常感谢任何帮助。

Answer 1

我认为问题在于您如何将初始数据提供给 useReducer。

const MyComponent = () => {

    const [state, dispatch] = useReducer(gifReducer, initialState);

}

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

const initialState = {
    gifs: [],
    loading: false
}

这样当你渲染 gif 时，就不会出现未定义的错误。

同样在您的gifReducer 函数中，您也可以提供默认值。

我认为这应该可以解决错误。或者，请粘贴您的 JSX 和 reducer 函数的完整代码。