Reactjs 如何在路径更改时重新引发React组件？ import React，{Component}来自“React”； 从“../../components/PostContainer”导入后容器； 从“react redux”导入{connect}； 从“react router”导入{withRouter}； 从“../../utils/API”导入API； 类用户扩展组件{ 建造师（道具）{ 超级（道具）； 此.state={ 员额：[]， 用户：[] }; } componentDidMount（）{ API.findUserById（this.props.match.params.id） 。然后（res=>{ 控制台日志（res）； this.setState（{user:res.data}）； }) .catch（err=>console.log（err））； } render（）{ 返回( {console.log（JSON.stringify（this.state.user））} {this.state.posts.map（post=>( ))} 没有帖子显示！

{this.state.user.username}

{this.state.user.id}

{this.state.user.email}

{this.state.user.profileImg}

{this.props.username}

{this.props.id}

{this.props.email}

{this.props.profileImg}

); } } 常量mapStateToProps=状态=>{ 返回{ 用户名：state.auth.username， id:state.auth.id， 电子邮件：state.auth.email， profileImg:state.auth.profileImg }; }; 使用路由器导出默认值（connect（MapStateTops）（用户））； 上述代码属于路径为“/user/：id”的任何路由。这呈现得很好，没有任何问题，但是，如果我单击一个链接将我带到另一个“/user/：id”，路径会更改，但组件不会重新呈现。是否有可能“欺骗”或强迫反应以重新招标组件

以下是路由的代码：

import React, { Component } from "react";
import PostContainer from "../../components/PostContainer";
import { connect } from "react-redux";
import { withRouter } from "react-router";
import API from "../../utils/API";

class User extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      user: []
    };
  }

  componentDidMount() {
    API.findUserById(this.props.match.params.id)
      .then(res => {
        console.log(res);
        this.setState({ user: res.data });
      })
      .catch(err => console.log(err));
  }

  render() {
    return (
      <div>
        <div>{console.log(JSON.stringify(this.state.user))}</div>
        <div className="container-fluid">
          <div className="row">
            <div className="col-8">
              {this.state.posts.map(post => (
                <PostContainer post={post} />
              ))}
              <h1>No Posts To Show!</h1>
            </div>
            <div className="col-2 sidebar-container">
              <p>{this.state.user.username}</p>
              <p>{this.state.user.id}</p>
              <p>{this.state.user.email}</p>
              <p>{this.state.user.profileImg}</p>
            </div>
            <div className="col-2 sidebar-container">
              <p>{this.props.username}</p>
              <p>{this.props.id}</p>
              <p>{this.props.email}</p>
              <p>{this.props.profileImg}</p>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    username: state.auth.username,
    id: state.auth.id,
    email: state.auth.email,
    profileImg: state.auth.profileImg
  };
};

export default withRouter(connect(mapStateToProps)(User));

从“react Router dom”导入{Switch，Route，BrowserRouter as Router}；
从“./components/NavbarFix”导入NavbarFix；
从“/utils/AuthRoute”导入AuthRoute；
从“/utils/AlreadyAuth”导入AlreadyAuth；
从“React”导入React，{Component}；
从“./components/Navbar”导入Navbar；
从“/pages/NoMatch”导入NoMatch；
从“./pages/Submit”导入提交；
从“/pages/SignUp”导入注册；
从“/pages/LogIn”导入登录名；
从“/pages/Posts”导入帖子；
从“/pages/User”导入用户
//从“/pages/Test”导入测试；
导入“/App.css”；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

Redux将在

mapstatetops

的返回更改时更新组件，因此您可以在其中映射参数：

import { Switch, Route, BrowserRouter as Router } from "react-router-dom";
import NavbarFix from './components/NavbarFix';
import AuthRoute from "./utils/AuthRoute";
import AlreadyAuth from "./utils/AlreadyAuth";
import React, { Component } from "react";
import Navbar from './components/Navbar';
import NoMatch from "./pages/NoMatch";
import Submit from './pages/Submit';
import SignUp from "./pages/SignUp";
import LogIn from "./pages/LogIn";
import Posts from "./pages/Posts";
import User from "./pages/User"
// import Test from "./pages/Test";
import "./App.css";

class App extends Component {  
  render() {
    return (
      <Router>
        <div>
          <Navbar />
          <NavbarFix />
          <Switch>
            <Route exact path="/" component={AuthRoute(Posts)} />
            <Route exact path="/submit" component={AuthRoute(Submit)} />
            <Route exact path="/signup" component={AlreadyAuth(SignUp)} />
            <Route exact path="/login" component={AlreadyAuth(LogIn)} />
            <Route exact path="/user/:id" component={AuthRoute(User)} />
            <Route exact path="/item/:itemId" component={AuthRoute(User)} />
            <Route component={NoMatch} />
          </Switch>
        </div>
        </Router>
    );
  }
}

export default App;

这与

componentdiddupdate

结合使用应该对您有效，因为

componentDidMount

仅在安装组件时运行，而不是更新组件

---

您还可以使用一个助手，如Redux Sagas、Thunk等，在后台为您执行这些调用，并相应地更新存储。

您可以在路由设置中添加其他代码吗？@Galupuf Updated

const mapStateToProps = (state, ownProps) => {
  return {
    username: state.auth.username,
    id: state.auth.id,
    email: state.auth.email,
    profileImg: state.auth.profileImg,
    viewUserId: ownProps.match.params.id,
  };
};