將對象添加到對象的數組並在 React 中設置狀態

Question

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

Answer 1

這里有一個工作示例： https : //codesandbox.io/s/nervous-yonath-9u2d6

問題在於您在哪里存儲新名稱以及您如何更新整個玩家狀態。

希望這個例子有幫助！