Question

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

当我点击列表项时，它会触发handleClick方法，该方法将获取新网址并将其设置为提供的状态。然后将该状态传递给使用该链接进行ajax调用的子组件。

问题是ajax调用仅在安装组件时加载一次，并且在此之后不再调用，无论我点击多少次。

每次点击其他项目时，如何让子组件加载新网址？

父组件：

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)
    });
},

Answer 1

实施componentWillReceiveProps方法。当道具发生变化并且这不是初始渲染时，它将被调用。然后根据现有和即将到来的道具更新状态。

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

Answer 2

感谢@WitVault设法在这里修改了部分：

我将其更改为子组件中的componentWillReceiveProps，而不是componentDidMount。确保您通过的道具在子和父组件中是相同的。（即，在子组件中，道具是url，在父级中，您将其传递给同一道具<GameDetail url={this.state.gameUrl}/>）然后您通过componentWillReceiveProps方法通过nextProps.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)
});
},

ReactJS从父

2 个答案: