这是我的 Apis 设置
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()
我没有使用它我得到了
您的查询名为“postNewBug”,但您正在尝试导出“usePostBugMutation”,您应该导出“usePostNewBugMutation”。看来您只是缺少“新”。我相信这就是您收到错误“对象不是函数”的原因,因为“usePostBugMutation”不存在。
调用时
usePostBugMutation()
返回值需要是一个对象,如下
const { addNewBug, isLoading } = usePostBugMutation();
就我而言,我可以通过纠正此错误来消除类似的错误。