ReactJS从json数据内部数组设置状态-多个数组

Question

我有一个json文件，它是一个数组，用于存储另一个包含我想要的另一个数组的字段。 我有一个ajax请求，将pitching字段存储到状态数组pitchers我有两个按钮，当单击它们时，它们将传递一个等于json文件中team_flag属性的值。

<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 状态，以便采用与单击的team_flag相对应的pitcher数组？ （即，如果我单击homeTeam，它将存储"team_flag": "home"下的"team_flag": "home" 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并在render方法中调用提到的代码。

React足够聪明，可以知道如果teamFlag或pitching数组发生变化，则需要重新渲染。

编辑：

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