React - 路由具有相同的路径，但不同的参数会在更新时更改数据

Question

我正在创建一个页面，您可以在其中查看人们的个人资料及其所有项目，其中有 pathname="/users/{their id}" 和一个可以将您带到个人资料的菜单。但我的问题是，当你转到一个人的个人资料页面，然后再转到另一个页面时，路径名发生了变化，但数据没有得到呈现，它只改变了路径名，而数据保持不变。为了呈现数据，您必须刷新页面，然后它会显示新用户数据。我如何获得它，这样您就不必刷新页面，就像他们单击他们想要访问的用户一样，路径名会更改并在不刷新页面的情况下呈现新数据？此外，当您在用户个人资料上刷新页面时会发生一些事情，它应该 return 用户的电子邮件地址，当您第一次访问该页面时它会这样做，但是当您刷新页面时它 return 是一个错误，说它找不到电子邮件。

这是菜单部分的代码（link 我的个人资料）：

import { Meteor } from "meteor/meteor"
import React from "react";
import { withRouter, Link } from "react-router-dom";

import { SubjectRoutes } from "./subjectRoutes/subjectRoutes";
import AddNote from "./AddNote";

class Menu extends React.Component{
  render(){
    return(
      <div>
        <div className="scroll"></div>
        <div className="menu">
          <h1>Menu</h1>
          <p><Link to="/">Home</Link></p>
          <Link to="/searchNotes">Notes</Link>
          <p><Link to="/addNote">Add a Note</Link></p>
          <p><Link to={`/users/${Meteor.userId()}`} >My Profile</Link></p>
        </div>
      </div>
    )
  }
}
export default withRouter(Menu)

userProfile.js:

import { Meteor } from "meteor/meteor";
import React from "react";
import { withRouter } from "react-router-dom";
import { Tracker } from "meteor/tracker";

import Menu from "./Menu";
import RenderNotesByUserId from "./renderNotesByUserId"

class userProfile extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      email: ""
    };
  }
  logoutUser(e){
    e.preventDefault()
    Accounts.logout(() => {
      this.props.history.push("/login");
    });
  }
  componentWillMount() {
    Meteor.subscribe('user');
    Meteor.subscribe('users');
    this.tracker = Tracker.autorun(() => {
      const user = Meteor.users.findOne(this.props.match.params.userId)
      this.setState({email: user.emails[0].address})
    });
  }
  render(){
    return(
      <div>
        <Menu />
        <button onClick={this.logoutUser.bind(this)}>Logout</button>
        <h1>{this.state.email}</h1>
        <RenderNotesByUserId filter={this.props.match.params.userId}/>
      </div>
    )
  }
}
export default withRouter(userProfile);

很抱歉提出这个问题这么久，这只是我遇到的一个非常奇怪的问题，我似乎无法在网上找到任何答案。

Answer 1

ComponentWillMount() 只运行一次，在你的组件被渲染之前。您还需要使用 ComponentWillReceiveProps() 以便在您的道具更改时更新您的状态。

查看 React Component Lifecycle

React - 路由具有相同的路径，但不同的参数会在更新时更改数据

React - Route with same path, but different parameters change data on update

parameters

meteor

reactjs

react-router

react-router-dom