Question

我正在使用React Router开展项目，并且我在数据流方面遇到了一些问题。

在每个页面上都有一个AJAX调用，用于获取组件的数据。我一直把它们放在componentDidMount：

// Below code is written in ES6
componentDidMount(){
  $.get(someURL, (data)=>{
    this.setState({data:data})
  })
}

虽然这适用于初始加载，但是当URL更改时（不需要手动刷新），它不会再次调用。我似乎无法找到适当的life cycle来放置AJAX调用。

有人请用正确的方法来启发我在React Router中获取数据。

Answer 1

经过一番搜索后，this README最终解决了这个问题。

文件中概述了两种解决方案：

使用addHandlerKey={true}：

<Route handler={User} path="/user/:userId" addHandlerKey={true} />
使用componentWillReceiveProps代替componentDidMount。
- 我最终使用componentDidMount作为初始加载，componentWillReceiveProps作为后续加载。
- 由于它们共享相同的代码，因此我创建了一个新函数_updateState并在两个生命周期中调用它。

我的代码现在：

class Classes extends React.Component {
  componentDidMount(){ this._updateState() }
  componentWillReceiveProps(){ this._updateState() }
  _updateState(){
    $.get(/*Some URL*/, (data)=>{
      this.setState({data:data})
    })
  }
}

React Router在哪里使用AJAX

1 个答案: