ReactJS Установить состояние из внутреннего массива json данных - Несколько массивов

Question

У меня есть json-файл, который представляет собой массив, в котором хранится другое поле, которое содержит другой массив, который я хочу. У меня есть запрос ajax, который сохраняет поле pitching в массив состояний. pitchers У меня есть две кнопки, которые при нажатии будут передавать значение, равное team_flag, в json-файле.

<button className="btn" onClick={this.handleClick.bind(this, 'home')}>{homeTeamName}</button> 
<button className="btn" onClick={this.handleClick.bind(this, 'away')}>{awayTeamName}</button> 

И метод:

handleClick: function(teamFlag) { 
    // setState of pitchers to whichever team is clicked (home, away) 
    // this.setState({ pitchers: this.state.pitchers.teamFlag})??? 
    console.log(teamFlag); 
} 

Как установить pitchersсостояние так, что он будет принимать pitcher массив, соответствующий team_flag, которая была нажата? (То есть, если я нажимаю на homeTeam он будет хранить pitcher массив, который находится под "team_flag": "home") Ниже файл JSON

 "pitching":[ 
     { 
      "pitcher":[ 
       {"name": "Billy", "hand": "right"} 
      ], 
      "team_flag":"away", 
     }, 
     { 
      "pitcher":[ 
       {"name": "Joe", "hand": "right"} 
      ], 
      "team_flag":"home", 
     } 
    ], 

Answer 1

Если у вас есть весь «качка» массив в состоянии под pitching ключ, который вы могли бы что-то как:

var pitchers = this.state.pitching.find(function(team) { 
    return team.team_flag === teamFlag; 
}); 

this.setState({ pitchers: pitchers.pitcher }); 

Если это только для целей презентации я бы не сохранить результат в государстве, вместо этого я бы сохранить teamFlag и вызвать упомянутый код в методе визуализации.

React достаточно умен, чтобы знать, что если teamFlag или массив качки меняются, тогда он нуждается в повторной визуализации.

РЕДАКТИРОВАТЬ:

class YourComponent extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      loading: true 
     } 
    } 

    componentWillMount() { 
     // make your ajax request 
     // and when the request is finished 
     this.setState({ loading: true }); 
    } 

    handleClick(ev, flag) { 
     this.setState({ flag: flag }); 
    } 

    render() { 
     let homeTeamName = 'Home'; 
     let awayTeamName = 'Away'; 
     let selectedFlag = this.state.flag; 
     let pitchers = this.state.pitching.find(function(team) { 
      return team.team_flag === selectedFlag; 
     }); 
     return (
      <div> 
       {!this.state.loading ? 
        <div> 
        <button className="btn" onClick={this.handleClick.bind(this, 'home')}>{homeTeamName}</button> 
        <button className="btn" onClick={this.handleClick.bind(this, 'away')}>{awayTeamName}</button> 
        </div>: 
        null 
       } 
       // render using the pitchers array 
      </div> 
     ); 
    } 
};