子组件怎么调用ajax,ReactJS从父项的onClick方法更新ajax调用子组件

当我点击列表项时，它会触发一个​​方法，它将获得新的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 (

{homeTeamName}

);

}, bind);

return (

{gameList}

);

子组件：

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)

});

},

2016-02-16

Simon

+0

访问它在componentWillReceiveProps方法调用Ajax从子组件是一个代码味道，IMO。 –

+0

@Mathletics我也不相信这是最好的做法，但是，我不知道如何去做。我有一个通过ajax调用生成的列表视图。然后在每个列表中包含指向特定列表数据的另一个链接。有另外一种方法可以提取这些数据吗？ –