RTK查询错误处理/ _a2未定义?

Question

我在我的应用程序中有许多不同的RTK查询调用，它们都工作得很好(get, post, patch, delete)。然而，在我当前的带有post调用的组件上，我得到了一个我以前从未见过的错误，并且无法弄清楚是什么使它出错。我得到的错误是名称:"TypeError"，消息:"_a2是未定义的"，然后是一个长堆栈从fetchBaseQuery开始。对后端的调用在Postman上工作得很好，我没有定义为_a2的道具或字段(或任何接近于此的内容)，堆栈跟踪没有引用_a2，并且我找不到任何引用相同错误的在线内容。有人见过这种情况吗?

我尝试根据文档中的建议从错误中获得更多细节，但这些都返回未定义。所以也许不是RTK查询错误?如果没有，我就完全不知所措了。https://redux-toolkit.js.org/rtk-query/usage/error-handling

我的设置如下，以防我完全忽略了一个简单的语法问题。

apiSlice电话:

addGoal: builder.mutation({
query: (arg) => {
const {planId, values} = arg;
return {
url: `/planapi/goals/${planId}`,
method: 'POST',
body: values
}, console.log(values)
},
invalidatesTags: ['Goals']
}),

发出调用的组件:

const AddGoal = ({planId}) => {

const [addNewGoal, { error }] = useAddGoalMutation()

let rtkerror
if (error) {
console.log("error", error.status, error.data) //returns undefined
rtkerror = <div><h3>{error.status} {JSON.stringify(error.data)}</h3></div>
//nothing is rendered from this, probably because coming back undefined?
}

const [open, setOpen] = React.useState(false);
console.log("planId ", planId)

const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};

return (
<div>
<Button variant="contained" onClick={handleClickOpen}>
Add Goal
</Button>
<Dialog open={open} onClose={handleClose}>
<DialogTitle>Add New Goal {rtkerror} </DialogTitle>
<DialogContent>


<Formik
initialValues={{
title: '',
dataCollection: '',
staffRole: '',
frequency: '',
location: '',
projectedHours: '',
materials: '',
currentStatus: '',
quote: '',
measurement: '',
plan: ''
}}
validationSchema={validationSchema}

onSubmit={async (values) => {
console.log(values);

try {
const payload =  await addNewGoal({ planId, values })
.unwrap()
.then((payload) => console.log('fulfilled', payload)) //this is also logging fulfilled undefined
.catch((error) => console.error('rejected', error)); //I've tried as error.status and error.data but these return undefined.
console.log('fulfilled', payload)
} catch (err) {
console.error('Failed to save goal: ', err)
toast.error("Error Adding Goal", {
position: toast.POSITION.TOP_CENTER
});
}
toast.success("Goal Added", {
position: toast.POSITION.TOP_RIGHT
});
//handleClose();

}}>


{formik => (
<form onSubmit={formik.handleSubmit}>
<TextField
id="title"
name="title"
label="Title/ Name of Goal"
placeholder=''
value={formik.values.title}
onChange={formik.handleChange}
error={formik.touched.title && Boolean(formik.errors.title)}
helperText={formik.touched.title && formik.errors.title}
/>
<TextField         
id="dataCollection"
name="dataCollection"
label="Data Collection"
placeholder=''
value={formik.values.dataCollection}
onChange={formik.handleChange}
error={formik.touched.dataCollection && Boolean(formik.errors.dataCollection)}
helperText={formik.touched.dataCollection && formik.errors.dataCollection}
/>
<TextField
id="staffRole"
name="staffRole"
label="Staff Role"
placeholder=""
value={formik.values.staffRole}
onChange={formik.handleChange}
error={formik.touched.staffRole && Boolean(formik.errors.staffRole)}
helperText={formik.touched.staffRole && formik.errors.staffRole}
/>
<TextField         
id="frequency"
name="frequency"
label="Times/Month"
placeholder=""
value={formik.values.frequency}
onChange={formik.handleChange}
error={formik.touched.frequency && Boolean(formik.errors.frequency)}
helperText={formik.touched.frequency && formik.errors.frequency}
/>
<TextField         
id="location"
name="location"
label="Location"
placeholder=""
value={formik.values.location}
onChange={formik.handleChange}
error={formik.touched.location && Boolean(formik.errors.location)}
helperText={formik.touched.location && formik.errors.location}
/>
<TextField         
id="projectedHours"
name="projectedHours"
label="Projected Hours"
placeholder=""
value={formik.values.projectedHours}
onChange={formik.handleChange}
error={formik.touched.projectedHours && Boolean(formik.errors.projectedHours)}
helperText={formik.touched.projectedHours && formik.errors.projectedHours}
/>
<TextField         
id="materials"
name="materials"
label="Materials Used"
placeholder=""
value={formik.values.materials}
onChange={formik.handleChange}
error={formik.touched.materials && Boolean(formik.errors.materials)}
helperText={formik.touched.materials && formik.errors.materials}
/>
<TextField         
id="currentStatus"
name="currentStatus"
label="Current Status"
placeholder=""
value={formik.values.currentStatus}
onChange={formik.handleChange}
error={formik.touched.currentStatus && Boolean(formik.errors.currentStatus)}
helperText={formik.touched.currentStatus && formik.errors.currentStatus}
/>
<TextField         
id="quote"
name="quote"
label="Client Statement"
placeholder=""
value={formik.values.quote}
onChange={formik.handleChange}
error={formik.touched.quote && Boolean(formik.errors.quote)}
helperText={formik.touched.quote && formik.errors.quote}
/>
<TextField         
id="measurement"
name="measurement"
label="Statement of Measurement"
placeholder=""
value={formik.values.measurement}
onChange={formik.handleChange}
error={formik.touched.measurement && Boolean(formik.errors.measurement)}
helperText={formik.touched.measurement && formik.errors.measurement}
/>
<TextField         
id="plan"
name="plan"
label="Plan"
placeholder=""
value={formik.values.plan}
onChange={formik.handleChange}
error={formik.touched.plan && Boolean(formik.errors.plan)}
helperText={formik.touched.plan && formik.errors.plan}
/>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button color="primary" variant="contained" fullWidth type="submit">
Submit
</Button>
</DialogActions>
</form>
)}
</Formik>
</DialogContent>

</Dialog>
</div>
);
};

我试图从几个地方的错误中获得更多细节，但唯一记录任何内容的是调用之后的.catch和.unwrap()(这是提供上面引用的错误的原因)。当我尝试错误。状态或错误。data，就没有定义了。但是记录错误，我得到的堆栈跟踪与_a2是未定义的。

Answer 1

由于您在return语句后附加, console.log(values)，您的query函数返回undefined。这可能已经是你的问题了——你能解决吗?