node.js - TypeError：对象不是函数或其返回值不可迭代..在redux rtk中尝试使用变异函数

Question

这是我的 API 设置

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const bugApis = createApi({
    reducerPath: 'Bug',
    baseQuery:fetchBaseQuery({
        baseUrl: 'http://localhost:5000'
    }),
    endpoints:(builder) => ({
        getBugData: builder.query({
            query: () => 'api/v1/bugs'
        }),
        postNewBug: builder.mutation({
            query: (initialPost) => ({
                    url: 'api/v1/bugs', 
                    method: 'POST', 
                    body: initialPost
            })
        })
    })
})

export const { useGetBugDataQuery,  usePostBugMutation } =  bugApis

这是我打电话时遇到的错误usePostBugMutation()

import React, { useState } from 'react'
import './form.css'
import FileBase from 'react-file-base64'
import { usePostBugMutation } from '../../services/bugApis'
function Form() {
    const [input, setInput] = useState({ author: '', title: '',  message: '', uploadFile: ''})
       const [ addNewBug, { isLoading } ] = usePostBugMutation()
    const handleInput = (e) => {
            e.preventDefault()
                setInput({ author: '', title: '',  message: '', uploadFile: ''})
        }
    return (
        <div className='formContainer'>
             <h2 className='form-header'>creating new bug</h2>
         <div className="formWrapper">
             <form className='input-wrapper' onSubmit={handleInput}>
                 <input type="text" placeholder='author' name='author' onChange={(e) => setInput({...input, author: e.target.value})} />
                 <input type="text" placeholder='title' name='title' onChange={(e) => setInput({...input, title: e.target.value})} />
                 <textarea placeholder='description'  name='message' onChange={(e) => setInput({...input, message: e.target.value})} ></textarea>
                 {/* <input type="text" placeholder='tags (coma separated)'  name='message' onChange={(e) => setInput({...input, message: e.target.value})}/> */}
                 <FileBase  type='file'  multiple={false}   onDone={({base64}) => setInput({...input, uploadFile: base64 })}
                   />
                 <button type='submit' className='submit-btn' onClick={handleInput}>submit</button>
                 <button type='reset' className='reset-btn'>clear</button>
             </form>
         </div>
        </div>
    )
}

export default Form

就像我解构addNewPost()我没有使用它一样，我收到了这个错误

Answer 1

您的查询名为“postNewBug”，但您正在尝试导出“usePostBugMutation”，您应该导出“usePostNewBugMutation”。好像您只是缺少“新”。我相信这就是您收到错误 Object is not a function 的原因，因为“usePostBugMutation”不存在。