React - パスは同じだが、パラメータが異なると更新時のデータが変更される

Question

私は人々のプロファイルとそのすべてのアイテム（pathname="https://stackoverflow.com/users/{their id}"）とあなたのプロフィールに行くことができるメニューを見ることができるページを作成しています。しかし、私の問題は、人物のプロフィールページに行った後、別の人物ページに行くと、パス名は変わりますが、データはレンダリングされず、パス名だけが変わり、データは変わりません。データをレンダリングするには、ページを更新してから新しいユーザーデータを表示する必要があります。どうすればページを更新する必要がないので、移動したいユーザーをクリックすると、パス名が変更され、ページの更新がなくても新しいデータがレンダリングされます。また、ユーザープロフィール上でページを更新すると、何かが発生します。ユーザーの電子メールアドレスを返すことになっています。最初にページにアクセスしたときのアドレスですが、ページを更新すると、電子メールを見つける。ここで

は、メニューの一部（私のプロフィールへのリンク）のためのコードです：

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()も使用する必要があります。

チェックアウト