React Router 为没有 props 的组件获取路由更改的数据答案

【问题标题】：React Router fetch data on route change for a component without propsReact Router 为没有 props 的组件获取路由更改的数据
【发布时间】：2018-08-13 03:09:37
【问题描述】：

在 Switch 路由器场景中，我们如何从服务器获取新数据，然后返回到没有任何 props 的已安装组件。在问这个之前，我浏览了很多帖子。所有帖子都建议使用 componentWillRecieveUpdate。如果组件没有任何道具，则永远不会调用此生命周期钩子。我什至尝试了 getDerivedStatefromProps

处理这种情况的最佳选择是什么？

import React from "react";
import { render } from "react-dom";

// import react router
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";

class Application extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Menu />
          <div>
            <Switch>
              <Route path="/help" component={Help} />
              <Route exact path="/" component={OverView} />
              <Route component={OverView} />
            </Switch>
          </div>
        </div>
      </Router>
    );
  }
}

class Menu extends React.Component {
  render() {
    return (
      <ul>
        <li>
          <Link to="/help">Help</Link>
        </li>
        <li>
          <Link to="/">OverView</Link>
        </li>
      </ul>
    );
  }
}

class Help extends React.Component {
  render() {
    return (
      <div>
        <p>Some help</p>
      </div>
    );
  }
}

class OverView extends React.Component {
  constructor(props, context) {
    super(props);
    this.state = {};
  }

 getDerivedStatefromProps(prevprops,prevstate, ){
   //Even this will also not be called
 }

 componentWillRecieveUpdate(newprops)
 {
     //I dont recieve a call to this when come back from help
 }

  render() {
    //can we fetch data here and save in the state
    // and re-render. Will this cause any issues
    return <div> How to return fetch data</div>;
  }
}

render(<Application />, document.getElementById("root"));

【问题讨论】：

codepen.io/anon/pen/VBRjEw
嗨，只是想指出 recieve 实际上拼写为 receive ，这可能已经解释了为什么该方法永远不会被调用。但是，我查找了 React.Component 的 API 文档，但在那里找不到 componentWillReceiveUpdate。它是componentWillUpdate 或componentWillReceiveProps。我还没有找到两者的组合。这些方法也已被弃用，不应根据以下页面使用：reactjs.org/docs/react-component.html - 还有一些解释为什么你不应该再使用这些方法
这是 stackoverflow 问题中的一个错字。我确实检查过。 codepen.io/anon/pen/VBRjEw
嗨 Srikan，您是否希望概览组件在每次访问路线时获取数据？因此，用户从帮助转到概览，然后需要再次获取数据。对吗？

标签： reactjs react-router react-router-dom

【解决方案1】：

我一直在挖掘您的代码，请注意您的组件每次都在安装，而不是像您声称的那样安装一次。

请阅读 React Router doc 以了解更多信息。

你可以在Demo看到它

class OverView extends React.Component{
  constructor(props,context) {
    super(props)
    this.state = {}
  }

  componentDidMount() {
    console.log('mounted');
  }

  render() {
    console.log('render');
    return(<div> How to return fetch data</div>)
  }
}

【讨论】：