javascript - React componentDidUpdate 不会在 url 更改时更改 props.match.params ？

Question

Match.params 未在 componentDidUpdate() 中更新。

我的路线是/sidebar/:id如果来自sidebar/1我去sidebar/2 this.props.match.params.id仍然显示id为 1 而不是更新后的 url id 2内componentDidUpdate()

尝试过 props.location但仍然显示旧网址的数据。

侧边栏页面组件

 componentDidMount () {
    const id  = this.props.match.params.id;
    //fetching some data
}
componentDidUpdate(prevProps) {

    console.log("Prevprops",prevProps.match.params.id);
    console.log("Cuurent id",this.props.match.params.id);
    //if both ids not same then fetch data again
}

路由器

const routes = [
  {
    path: "sidebar/:id",
    component: asyncComponent(() => import('../sidebarPage')),
  },
];
class AppRouter extends Component {
  render() {
    const { url } = this.props;
 return (
      <div>
        {routes.map(singleRoute => {
          const { path, exact, ...otherProps } = singleRoute;
          return (
            <Route
              exact={exact === false ? false : true}
              key={singleRoute.path}
              path={`${url}/${singleRoute.path}`}
           />
          );

        })}
      </div>
    );
  }
}

异步组件

import React, { Component } from 'react';
import Nprogress from 'nprogress';
import ReactPlaceholder from 'react-placeholder';
import 'nprogress/nprogress.css';
import 'react-placeholder/lib/reactPlaceholder.css';

export default function asyncComponent(importComponent) {
  class AsyncFunc extends Component {
    constructor(props) {
      super(props);
      this.state = {
        component: null
      };
    }
    componentWillMount() {
      Nprogress.start();
    }
    componentWillUnmount() {
      this.mounted = false;
    }
    async componentDidMount() {
      this.mounted = true;
      const { default: Component } = await importComponent();
      Nprogress.done();
      if (this.mounted) {
        this.setState({
          component: <Component {...this.props} />
        });
      }
    }

    render() {
      const Component = this.state.component || <div />;
      return (
        <ReactPlaceholder type="text" rows={7} ready={Component !== null}>
          {Component}
        </ReactPlaceholder>
      );
    }
  }
  return AsyncFunc;
}

我预计当我从 sidebar/1 出发时至sidebar/2在componentDidUpdate this.props.match.params.id显示2和prevProps显示1 .

Answer 1

您的asyncComponent仅使用初始props并且不会对更改使用react。

试试这个代码:

async componentDidMount() {
  this.mounted = true;
  const { default: Component } = await importComponent();
  Nprogress.done();
  if (this.mounted) {
    this.setState({
      component: Component
    });
  }
}

render() {
  const Component = this.state.component;
  return (
    <ReactPlaceholder type="text" rows={7} ready={Component !== null}>
      {Component ? <Component {...this.props}/> : <div/>}
    </ReactPlaceholder>
  );
}