Question

我有一条这样的路线：

<BrowserRouter>
      <Switch>
        <Route path="/question/:title" component={Item} />
      </Switch>
    </BrowserRouter>

该组件使用 axios 来获取数据并更新站点上的内容，这是通过componentWillMount函数完成的：

componentWillMount(){
        const {title} = this.props.match.params;
        axios.get(server + '/api/question/slug/' + title)
                .then(response => {
                    this.setState({
                        question: response.data,
                        loading: false
                    })

                })
    }

现在的问题是，假设我在“ site.com/question/this-is-an-article”页面上，并且我使用<Link to="/question/second-article">Second Article</Link>进行导航，就像没有调用componentWillMount函数，因此以前的内容仍然保留在页面上。网址更改后如何运行componentWillMount函数？

Answer 1

首先，首选使用安全的生命周期react-lifecycle-methods-diagram

由于您正在使用react-router-dom，因此可以通过这样的渲染道具获取URL，请参考文档here

history.location.pathname

因此您可以尝试检查网址是否在shouldComponentUpdate中这样更改

shouldComponentUpdate(prevProps, prevState) {
  return this.props.history.location.pathname !== prevProps.history.location.pathname
}

您可以在其中添加更多条件，或者只是通过组件设计调整来防止复杂条件

Answer 2

尝试将componentDidUpdate用于axios调用。必要-当title（prop）参数更改时，您想调用api。

您也可以尝试使用componentWillReceiveProps / UNSAFE_componentWillReceiveProps。

P.S。 -正确使用componentDidMount和以上内容。在http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

中查找生命周期

Answer 3

我认为您不需要任何生命周期（如果是，只需使用componentDidMount）：

class App extends Component {
  constructor() {
    super();
    this._initHistoryListen();
  }
  _unListen = () => {};
  _initHistoryListen() {
    this._unListen = history.listen((location, action) => {
      const {
        title
      } = this.props.match.params;
      axios.get(server + '/api/question/slug/' + title)
        .then(response => {
          this.setState({
            question: response.data,
            loading: false
          })

        })
    });
  }
  componentWillUnmount(){
     this._unListen()
  }
}

如何在URL更改时重新呈现组件？

3 个答案: