Javascript ReactJS从父对象的onClick方法更新对子组件的ajax调用

我有一个从一个json文件传递的数据数组

当我单击列表项时，它会触发一个

handleClick

方法，该方法将获取新的url并将其设置为提供的状态。然后将该状态传递给使用该链接进行ajax调用的子组件

问题是，ajax调用在组件装入时只加载一次，此后无论我单击它多少次，都不会再进行调用

如何让子组件在每次单击不同的项目时加载新的url

父组件：

getInitialState: function() {
    return {
        gameUrl: ''
    };
},
handleClick: function() {
    this.setState({
        gameUrl: gameUrl
    });
},
render: function() {
    var gameList = this.props.data.map(function(game) {
        var homeTeamName = game.home_team_name;
        var awayTeamName = game.away_team_name;

        var gameUrl = game.game_directory+'/anotherFile.json';
        console.log(homeTeamName+' vs '+awayTeamName+':'+ gameUrl);

        var click = this.handleClick;
        return (
            <li key={game.location} className="list-group-item" onClick={click}>
               {homeTeamName}
            </li>   
        );
    }, bind);
    return (
        <div>
            <ul>
                {gameList}
            </ul>
            <GameDetail url={this.state.gameUrl}/>
        </div>
    );

    componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({
            data: data.data
        });
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
},

---

实现

组件将接收道具
方法。
当道具已更改且不是初始渲染时，将调用它。然后根据现有和即将出现的道具更新状态

componentWillReceiveProps: function(nextProps) {
  this.setState({
    // set something 
  });
}

感谢@WitVault成功地做到了这一点，这里是修订的部分：

在子组件中，我将其更改为componentWillReceiveProps，而不是componentDidMount。确保要通过的道具在子组件和父组件中相同。（即，在子组件中，道具是
url
，在父组件中，您将其传递给同一道具
），然后通过
nextrops.url

componentWillReceiveProps: function(nextProps) {
// Access the url prop
var newUrl = nextProps.url;
$.ajax({
  url: newUrl,
  dataType: 'json',
  cache: false,
  success: function(data) {
    this.setState({
        data: data.data
    });
  }.bind(this),
  error: function(xhr, status, err) {
    console.error(this.props.url, status, err.toString());
  }.bind(this)
});
},

很抱歉，我提出了这个问题，但是，我应该把它放在子组件还是父组件中？如果在孩子身上，它怎么知道道具变了（更具体地说，
url
prop？@Simon您必须将其放入子组件中。在
component中收到的下一个prop将接收props
将包含更改的url。您可以像以前一样访问它。在我看来，从子组件调用ajax是一种代码味道。@Mathletics我也不相信这是错误的。）这是最佳实践，但我不知道如何进行。我有一个通过ajax调用生成的列表视图。然后在每个列表中包含指向特定列表数据的另一个链接。是否有其他方法可以提取该数据？