Redux RTK使用mutation时报Object is not iterable错误求助

核心问题是你导出的RTK Query自动生成的mutation hook名称和实际生成的规则不匹配：

• 你在endpoints中定义的mutation字段名为postNewBug
• 按照RTK Query的自动命名规则，会生成名为usePostNewBugMutation的hook
• 但你导出时错误写为usePostBugMutation，等于导出了一个不存在的undefined值
• 组件中调用usePostBugMutation()实际是调用undefined，自然无法返回可迭代的数组用于解构，就触发了TypeError: Object is not a function or its return value is not iterable报错

修改API配置文件中的导出语句，把hook名称和自动生成的名称对齐即可：

// 原错误导出
// export const { useGetBugDataQuery,  usePostBugMutation } =  bugApis

// 修正为正确导出
export const { useGetBugDataQuery,  usePostNewBugMutation } =  bugApis

之后同步修改组件中的引入和调用语句：

// 原错误引入
// import { usePostBugMutation } from '../../services/bugApis'
// 原错误调用
// const [ addNewBug, { isLoading } ] = usePostBugMutation()

// 修正为正确引入
import { usePostNewBugMutation } from '../../services/bugApis'
// 修正为正确调用
const [ addNewBug, { isLoading } ] = usePostNewBugMutation()

额外优化提示 #

你当前的提交逻辑只做了表单清空，没有实际触发mutation提交数据，可以在提交函数中补充调用逻辑：

const handleInput = async (e) => {
  e.preventDefault()
  // 新增调用mutation提交数据的逻辑
  await addNewBug(input).unwrap()
  setInput({ author: '', title: '',  message: '', uploadFile: ''})
}

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