Javascript 来自json数据内部数组的ReactJS设置状态-多个数组

我有一个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> 

如何设置

投手

状态，以便它将采用与单击的

团队标志

对应的

投手

数组？（也就是说，如果我点击homeTeam，它将存储

投手

数组，该数组位于

团队旗下：“home”

）下面是json文件

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

---

假设整个“pitching”数组处于

pitching

键下的状态，则可以执行以下操作：

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

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

如果只是出于表示目的，我不会将结果保存在状态中，而是保存teamFlag并在render方法中调用提到的代码

React非常聪明，知道如果teamFlag或俯仰阵列发生更改，则需要重新渲染

编辑：

class YourComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
加载：正确
}
}
组件willmount（）{
//提出ajax请求
//当请求完成时
this.setState（{loading:true}）；
}
把手舔（电动汽车，旗帜）{
this.setState（{flag:flag}）；
}
render（）{
让homeTeamName='Home'；
let-awayTeamName='Away'；
让selectedFlag=this.state.flag；
让投手=this.state.pitching.find（函数（团队）{
return team.team_flag===selectedFlag；
});
返回(
{！这是。状态。加载？
{homeTeamName}
{awayTeamName}
:
无效的
}
//使用水壶数组进行渲染
);
}
};

它仅用于演示目的（即，我需要获取

投手中的数据并在其中显示数据）。如果上面的代码没有进入
handleClick
方法，它怎么知道什么时候单击它呢？我的错，我没有正确地表达自己。这样做的想法是将国旗保存在
handleClick
中的状态，而不是保存投手。我将用一个示例组件更新我的答案…谢谢@nbermudezs，只是想知道什么会改变加载状态，因为它一直都是真的？Oops，typo，
this.setState（{loading:true}）应该是
false
。很抱歉。注意它说：“当请求完成时”嗯，当我尝试您发布的上述方法时，我在构建它时收到一个错误：
相邻的JSX元素必须包装在一个封闭的标记中
但是div是封闭的。。。
var pitchers = this.state.pitching.find(function(team) {
  return team.team_flag === teamFlag;
});

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

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