Javascript 将对象添加到对象'；s数组并在React中设置状态

我是React的新手，我想出了一个一次性学习很多东西的主意。我有一个组件，它的初始状态是一个带有棒球运动员对象的数组，我需要通过一个输入字段将新棒球运动员的名字添加到该状态，然后，一旦添加了一个棒球运动员，第二个组件就会出现，带有要添加数据的输入字段

我该怎么做

export default class BaseballPlayerList extends React.Component {
  constructor() {
    super();
    this.state = {
      baseBallPlayers: [
        {
          name: "Barry Bonds",
          seasons: [
            {
              year: 1994,
              homeRuns: 37,
              hitting: 0.294
            },
            {
              year: 1996,
              homeRuns: 40,
              hitting: 0.294
            }
          ]
        }
      ]
    };
    this.addPlayer = this.addPlayer.bind(this);
  }
  addPlayer(e) {
    e.preventDefault();
    const newPLayer = {
      baseBallPlayers: this.state.baseBallPlayers.name,
      seasons: []
    };
    console.log(newPLayer);
    this.setState(prevState => ({
      baseBallPlayers: [...prevState.baseBallPlayers, newPlayer]
    }));
  }
  render() {
    return (
      <div>
        <div>
          <ul>
            {this.state.baseBallPlayers.map((player, idx) => (
              <li key={idx}>
                <PlayerSeasonInfo player={player} />
              </li>
            ))}
          </ul>
        </div>

        <input value={this.state.baseBallPlayers.name} />
        <button onClick={this.addPlayer}>AddPlayer</button>
      </div>
    );
  }
}
export default class PlayerSeasonInfo extends Component {
  constructor(props) {
    super(props);
    this.player = this.props.player;
  }
  render() {
    return (
      <div>
        {this.player && (
          <div>
            <span>{this.baseBallPlayers.name}</span>
            <span>
              <input placeholder="year" />
              <input placeholder="homeRuns" />
              <input placeholder="hitting" />
              <button>AddInfo</button>
            </span>
          </div>
        )}
      </div>
    );
  }
}

导出默认类BaseballPlayerList扩展React.Component{
构造函数（）{
超级（）；
此.state={
棒球运动员：[
{
姓名：“巴里·邦兹”，
季节：[
{
年份：1994年，
全垒打：37分，
命中率：0.294
},
{
年份：1996年，
全垒打：40分，
命中率：0.294
}
]
}
]
};
this.addPlayer=this.addPlayer.bind（this）；
}
addPlayer（e）{
e、 预防默认值（）；
常数newPLayer={
棒球运动员：this.state.baseBallPlayers.name，
季节：[]
};
console.log（newPLayer）；
this.setState（prevState=>({
棒球手：[…prevState.BaseballPlayer，newPlayer]
}));
}
render（）{
返回(

{this.state.baseBallPlayers.map（（player，idx）=>(


))}

AddPlayer
);
}
}
导出默认类PlayerSeasonInfo扩展组件{
建造师（道具）{
超级（道具）；
this.player=this.props.player；
}
render（）{
返回(
{this.player&&(
{这是棒球运动员的名字}
附加信息
)}
);
}
}

这里有一个工作示例：

问题是在哪里存储新名称以及如何更新整个玩家状态

---

希望这个例子有帮助

您尝试过什么？它只添加了输入字段请使用。Avoir在评论中发布代码，因为它不可读。另外，请参阅：我刚刚添加了我尝试过的内容，但我不知道如何继续