javascript - 使用不同的参数重新渲染相同的组件

Question

我正在开发一个与社交媒体网站具有类似功能的 react 项目。我下面有一个用户配置文件组件，其中包含当前用户正在关注的其他用户配置文件的链接(朝向下面代码的底部)。本质上我想做的是用不同的用户重新渲染相同的组件。但是，指向新用户配置文件的链接不会导致调用 getProfile 操作，因此 redux 状态不会更新。如何导航到新的配置文件并使用新用户名再次调用 useEffect Hook ？

谢谢!

import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { Link } from "react-router-dom";

import GalleryItem from "../gallery-item/gallery-item.component";

import {
  getProfile,
  addFollow,
  removeFollow
} from "../../redux/profile/profile.actions";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSpinner, faUserEdit } from "@fortawesome/free-solid-svg-icons";

const Profile = ({
  getProfile,
  addFollow,
  removeFollow,
  auth,
  profile: { userProfile, loading },
  props
}) => {
  const userAlias = props.match.params.alias;

  useEffect(() => {
  getProfile(userAlias);
  }, [getProfile]);


  return loading ? (
    <div class="d-flex justify-content-center">
      <FontAwesomeIcon
        icon={faSpinner}
        className="fa-spin"
        style={{ height: "50px", width: "50px", color: "white" }}
      />
    </div>
  ) : (
    <div className="container ">
      <div className="row">
        <div className="col-md-12 align-self-center">
          <img
            className="rounded-circle float-left shadow-lg"
            alt="100x100"
            src={userProfile.userProfileImage}
            data-holder-rendered="true"
            style={{ height: "200px", width: "200px" }}
          />
          <div
            className="vertical-center"
            style={{ marginLeft: "260px", marginTop: "50px" }}
          >
            <h2>
              {auth.user === null || auth.user.alias !== userAlias ? (
                <b style={{ color: "white" }}>{userAlias}</b>
              ) : auth.user.alias === userAlias ? (
                <b style={{ color: "white" }}>
                  {userAlias}
                  <Link className="" to="/profile/edit">
                    <FontAwesomeIcon
                      icon={faUserEdit}
                      className="fontAwesome"
                      style={{ paddingLeft: "10px", color: "limegreen" }}
                    />
                  </Link>
                </b>
              ) : (
                <b>{userAlias}</b>
              )}
            </h2>
            <p>
              <b style={{ color: "white" }}>
                {" "}
                {userProfile.posts.length} Posts
              </b>
              <b style={{ color: "white" }}>
                {" "}
                {userProfile.followers.length} Followers{" "}
              </b>
              <b style={{ color: "white" }}>
                {" "}
                {userProfile.following.length} Following{" "}
              </b>
            </p>
            {auth.user === null || auth.user.alias === userAlias ? null : auth
                .user.alias !== userAlias &&
              userProfile.followers.some(
                e => e.userAlias === auth.user.alias
              ) ? (
              <button
                type="button"
                className="btn btn-primary btn-lg "
                onClick={e => removeFollow(userProfile.userId)}
              >
                Following
              </button>
            ) : auth.user.alias !== userAlias ? (
              <button
                type="button"
                className="btn btn-primary btn-lg "
                onClick={e => addFollow(userProfile.userId)}
              >
                Not Following
              </button>
            ) : (
              <button
                type="button"
                className="btn btn-primary btn-lg "
                disabled
              >
                Follow/Unfollow
              </button>
            )}
          </div>
        </div>
      </div>
      <hr />
      <div className="row d-flex justify-content-center">
        {userProfile.posts.map((post, i) => (
          <GalleryItem key={i} post={post} />
        ))}
      </div>
      {userProfile.following.length > 0 ? (
        <div>
        <h1 className="text-white text-center mt-5">Following</h1>
        <hr />
        **<div className="row justify-content-center text-center px-auto">
        {userProfile.following.map((profile, i) => (
          <Link className="" to={`/profile/${profile.userAlias}`}>
            <img
              className="rounded-circle border border-info m-4"
              alt="100x100"
              src={profile.getFollowingUserProfileImageUrl}
              data-holder-rendered="true"
              style={{ height: "80px", width: "80px" }}
            />
            <div
            className="vertical-center"
            style={{ marginBottom: "20px", color: "black" }}
          >
            <h5>{profile.userAlias}</h5>
          </div>
          </Link>
        ))}
        </div>**
        </div>
      ) :(<div></div>)}
    </div>
  );
};

Profile.propTypes = {
  getProfile: PropTypes.func.isRequired,
  profile: PropTypes.object.isRequired,
  auth: PropTypes.object.isRequired,
  props: PropTypes.object.isRequired
};

const mapStateToProps = (state, ownProps) => ({
  auth: state.auth,
  profile: state.profile,
  props: ownProps
});

export default connect(
  mapStateToProps,
  { getProfile, addFollow, removeFollow }
)(Profile);

Answer 1

您需要跟踪useEffect的依赖列表中的userAlias，每次更改时都会调用api回调。

const userAlias = props.match.params.alias;

  useEffect(() => {
  getProfile(userAlias);
  }, [getProfile, userAlias]);