Next.js+Redux Toolkit Query待办列表异常：新增项不显示且数据循环求助

1. 新增待办项后页面不显示新内容 #

• 检查RTK Query的mutation标签配置：如果你的查询接口设置了providesTags: ['Todo']，新增todo的mutation必须添加invalidatesTags: ['Todo']，触发查询缓存失效并重新拉取数据。因为JSONPlaceholder是模拟接口，不会真正存储数据，这一步是触发页面刷新数据的关键。
• 手动更新缓存替代重请求：如果不想重新拉取数据，可在mutation的onSuccess回调里手动往缓存里加新项，示例代码：

  onSuccess: (newTodo) => {
    dispatch(todoApi.util.updateQueryData('getTodos', undefined, (draft) => {
      draft.push(newTodo);
    }))
  }
  

• 确认组件数据订阅：检查todosList.js中是否正确使用useGetTodosQuery()获取数据，没有在组件内错误过滤或覆盖返回的列表数据。

2. 输入框输入时Todos数据重复循环 #

• 排查查询触发时机：检查输入框的onChange事件是否意外触发了查询请求，或是输入状态变化导致组件重复挂载，引发多次查询缓存叠加。
• 检查查询缓存策略：确认RTK Query的查询配置是否开启了refetchOnMountOrArgChange等自动重取选项，若输入值被误作为查询参数，会触发新查询导致数据重复。
• 修正列表项key值：渲染todo列表时，必须用每个todo唯一的id作为key，避免用索引或重复值，否则React会错误复用组件，造成视觉上的重复循环假象。
• 避免状态冗余：确保组件没有同时使用RTK Query缓存和本地state存储todo列表，若两者未同步，输入时本地state更新会导致旧数据重复渲染。

内容的提问来源于stack exchange，提问作者Hovi Sohibul Wafa