Question

我正在尝试添加到我现有的名为player的数组（这是一个外部文件＆＃34; players.js＆＃34;导入我的父母）。

我可以写：

 players.push({
  name: 'Maul',
  id: 26
});

这就像ID一样用于密钥，名称在数组中更新。

但是，如果我写

   handleAddPlayer = () => {
    console.log('i am working');
    players.push({
      name: 'Maul',
      id: 26
    });
  };

在我的按钮上我有

    <div>
      <h4>Add A Player</h4>
      <input />
      <button onClick={this.handleAddPlayer}>Press to Add Player</button>
    </div>

我的状态如下：

  this.state = {
  id: players.id,
  totalScore: 0,
  countInfo: [],
  evilName: '',
  color: '#6E68C5',
  scoreColor: '#74D8FF',
  fontAwe: 'score-icon',
  incrementcolor: '',
  scoreNameColor: 'white',
  glow: '',
  buttonStyle: 'count-button-start',
  players,
};

它不起作用。

从这里我有两个问题：

为什么当我点击按钮但是之前没有作为功能工作时它会更新？
我想在输入中添加一个名称，并生成一个添加到我的数组中的唯一键，players.js

我尝试连接并且没有取得多大成功。

Answer 1

玩家是状态对象的属性，因此您需要调用setState来更新属性：

handleAddPlayer = () => {
  // create a clone of your array of players; don't modify objects on the state directly
  const players = this.state.players.slice(0);

  players.push({
    name: 'Maul',
    id: 26
  });

  this.setState({
    players: players,
  });
};

反应使用.push添加到onClick的数组

1 个答案: