Question

我正在创建一个页面，您可以在其中查看人物详情及其所有项目，其中包含pathname="/users/{their id}"以及可以将您带到个人资料的菜单。但我的问题是，当你转到人员个人资料页面，然后转到另一个人，时，路径名会改变，但数据不会被渲染，只会改变路径名，数据保持不变。为了呈现数据，您必须刷新页面然后显示新用户数据。我如何获得它以便您不必刷新页面，因此当他们点击他们想要去的用户时，路径名会更改并呈现新数据而不刷新页面？此外，当您在用户配置文件上刷新页面时会发生某些事情，它应该返回用户＆＃39;电子邮件地址，它在您第一次访问该页面时执行，但当您刷新页面时，它会返回错误消息，说明它无法找到该电子邮件。

以下是菜单部分的代码（链接到我的个人资料）：

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 - 具有相同路径的路由，但不同的参数会在更新时更改数据

1 个答案: