react redux axios调用不会返回与我的 Postman 调用相同的数据

f45qwnt8  于 2021-10-10  发布在  Java
关注(0)|答案(2)|浏览(456)

我目前正在处理一个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的问题吗?如何应对重复出现的问题?非常感谢您的帮助

1tuwyuhd

1tuwyuhd1#

export const getAllMessages = () => async (dispatch) => {

上面的代码是一个thunked操作(返回函数的函数)。它的工作方式是发送函数,而不是将对象分派到存储。redux thunk中间件检查它是否是一个函数,并通过分派执行它。

const dispatch = useDispatch(); // From react-redux
useEffect(() => {
    dispatch(getAllMessages());
}, [dispatch]);

需要调度Thunke操作,以便它到达redux thunk中间件。否则就没有东西可以捡了。

ykejflvf

ykejflvf2#

解决了这个问题-这是useeffect挂钩中的异步/等待问题。我将useeffect钩子从AllConvas组件移动到作为站点页面的组件,并在那里调用useeffect函数。useeffect函数现在如下所示:

useEffect(async () => {
    await getAllMessages();
  }, []);

如果我去掉async/await,以前经历的行为就会被复制。

相关问题