javascript - 为什么在第一次登录时（通过获取请求）获取先前用户的帖子？

问题描述

我有一个简单的博客，其中 eash 用户有帖子。登录时用户被重定向到主页，该主页从 APi 获取该用户的所有帖子。然而奇怪的事情发生了，在登录用户被重定向到主页但第一个获取请求获取前一个用户的帖子后。这仅在第一次提取时发生。如果我刷新，则获取当前用户的帖子。有人可以解释发生了什么并提供解决方案吗？

以下是 Home.jsx 的代码

import React, { useEffect } from "react";
import { useSelector } from "react-redux";
import Container from "@material-ui/core/Container";
import Link from "@material-ui/core/Link";
import { getPosts } from "../../actions/authActions";

export default function Home() {
  useEffect(() => getPosts(), []);

  const { posts, userId } = useSelector(getUser);

  return (
    <Container>
      <h1>Home</h1>
      <p>
        Lacus vel facilisis volutpat est velit egestas dui id ornare. Semper
        auctor neque vitae tempus quam. Sit amet cursus sit amet dictum sit amet
        justo. Viverra tellus in hac habitasse. Imperdiet proin fermentum leo
        vel orci porta. Donec ultrices tincidunt arcu non sodales neque sodales
        ut. Mattis molestie a iaculis at erat pellentesque adipiscing. Magnis
        dis parturient montes nascetur ridiculus mus mauris vitae ultricies.
        Adipiscing elit ut aliquam purus sit amet luctus venenatis lectus.
        Ultrices vitae auctor eu augue ut lectus arcu bibendum at. Odio euismod
        lacinia at quis risus sed vulputate odio ut. Cursus mattis molestie a
        iaculis at erat pellentesque adipiscing.
      </p>

      {posts.map((post, index) => {
        return (
          <div key={index}>
            <h1>{post.title}</h1>
            <p>
              {post.content.substring(0, 100) + " ..."}
              <Link href={`/users/${userId}/posts/${post._id}`} variant="body2">
                Read more
              </Link>
            </p>
          </div>
        );
      })}
    </Container>
  );
}

export const getUser = (state) => state.auth;

以下是 loginUser.js 函数：

export const loginUser = (userData, history) => {
  axios
    .post(`${url}login`, userData)
    .then((res) => {
      // Save to localStorage
      // Set token to localStorage
      const { token } = res.data;
      localStorage.setItem("jwtToken", token);
      // Set token to Auth header
      setAuthToken(token);
      // Decode token to get user data
      const decoded = jwt_decode(token);
      //Set user and is Authenticated
      localStorage.setItem("id", decoded.id);
      localStorage.setItem("isAuthenticated", true);
      dispatch(setCurrentUser(decoded.id));
      console.log(decoded.posts);
      dispatch(setPosts(decoded.posts));

      //redirect to home page
      history.push(`/users/${decoded.id}/home`);
    })
    .catch((e) => {
      //handle validation errors
      if (e.response.status === 400)
        return dispatch(saveErrors(e.response.data));
      //handle other errors
      dispatch(saveErrors(e.response.status));
    });
};

setCurrentUser 函数

// Set logged in user
export const setCurrentUser = (user) => {
  return {
    type: SET_CURRENT_USER,
    payload: user,
  };
};

authReducer.js

import { SET_CURRENT_USER, SET_POSTS } from "../actions/types";
import isEmpty from "is-empty";

const initialState = {
  userId: localStorage.id,
  posts: [],
  isAuthenticated: localStorage.isAuthenticated,
};

export default function (state = initialState, action) {
  switch (action.type) {
    case SET_CURRENT_USER:
      return {
        ...state,
        userId: action.payload,
        isAuthenticated: !isEmpty(action.payload),
      };
    case SET_POSTS:
      return {
        ...state,
        posts: action.payload,
      };

    default:
      return state;
  }
}

以下是 getPosts.js 函数：

export const getPosts = () =>
  axios
    .get(`${url + userId}/home`)
    .then((res) => dispatch(setPosts(res.data)))
    .catch((e) => dispatch(saveErrors(e.response.status)));

标签： javascriptnode.jsreactjsreact-reduxreact-router

javascript - 为什么在第一次登录时（通过获取请求）获取先前用户的帖子？

问题描述

解决方案

推荐阅读