将对象添加到对象的数组并在 React 中设置状态

Question

I am new at React and I come up with an Idea for learning many things in one shot. I have this component, Its initial state is an array with an object of baseball Players, I need to add new baseball Player's name through an Input field to the state and then, once a baseball Player is added, a second component appears with input fields to add data.

How can I do that?

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

here do you have a working example: https://codesandbox.io/s/nervous-yonath-9u2d6

the problem was where you where storing the new name and how you where updating the whole players state.

hope the example helps!