我目前正在处理一个api调用,它的工作方式与postman中的预期完全相同,但是当在前端浏览器上进行相同的调用时,它不会返回相同的数据。斯塔克是梅恩。
所有这些中非常有趣的部分是axios请求每次都返回不同的数据数组。为了帮助解释这一点,出于测试目的,数据库在进行调用时只返回4条消息。在postman中,每次都会返回所有4条消息。但对于react-redux,axios调用有时返回2条消息,有时返回3条消息,但从未像预期的那样返回完整的4条消息。
编辑:看起来这是一个useeffect问题,我创建了一个按钮来调用相同的api请求,并返回所有4条消息。还有谁有过这个问题?
以下是api调用:
router.get('/all', auth, async (req, res) => {
try {
const lastMessagesArr = [];
const contacts = await Message.aggregate([
{ $match: { user: ObjectId(req.user.id) } },
{ $group: { _id: '$number' } },
]);
// console.log('contacts', contacts);
// console.log('req.user.id', req.user.id);
const getAllLast = async () => {
for (i = 0; i < contacts.length; i++) {
// let shortenedMessage;
let lastMessage = await Message.find({
user: ObjectId(req.user.id),
number: contacts[i]._id,
}).sort({ createdAt: -1 });
lastMessagesArr.push(lastMessage[0]);
// console.log('lastMessage', lastMessage);
}
lastMessagesArr.sort().reverse();
res.json(lastMessagesArr);
// console.log('lastMessagesArr', lastMessagesArr);
};
await getAllLast();
} catch (err) {
console.error(err.message);
res.status(500).json({ msg: 'Server Error' });
}
});
以下是我的axios呼叫react redux:
export const getAllMessages = () => async (dispatch) => {
try {
const res = await axios.get('/api/messages/all');
console.log('res.data all messages', res.data);
dispatch({
type: SET_ALL_MESSAGES,
payload: res.data,
});
} catch (err) {
const errors = err.response.data.errors;
if (errors) {
errors.forEach((error) => dispatch(setAlert(error.msg, 'danger')));
}
dispatch({
type: MESSAGE_ERROR,
payload: { msg: err.response.statusText, status: err.response.status },
});
}
};
当组件加载时,这是通过useeffect挂钩在前端调用的:
const AllConvos = ({ getAllMessages, message }) => {
useEffect(() => {
getAllMessages();
}, []);
return (
....
)
这是浏览器问题吗(使用chrome作为浏览器)这是axios的问题吗?如何应对重复出现的问题?非常感谢您的帮助
2条答案
按热度按时间1tuwyuhd1#
上面的代码是一个thunked操作(返回函数的函数)。它的工作方式是发送函数,而不是将对象分派到存储。redux thunk中间件检查它是否是一个函数,并通过分派执行它。
需要调度Thunke操作,以便它到达redux thunk中间件。否则就没有东西可以捡了。
ykejflvf2#
解决了这个问题-这是useeffect挂钩中的异步/等待问题。我将useeffect钩子从AllConvas组件移动到作为站点页面的组件,并在那里调用useeffect函数。useeffect函数现在如下所示:
如果我去掉async/await,以前经历的行为就会被复制。