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，它将存储 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 });

如果仅用于演示目的，我不会将结果保存在 state 中，而是保存 teamFlag 并在 render 方法中调用提到的代码。

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