React:使用spread运算符更新State内的数组返回的结果比需要的多1000倍

我正在尝试从 .map() 方法在 render() 方法。当前,我要映射的数组中有9个对象,我希望从中提取属性并将其添加到状态内的数组中。什么时候? console.log()

下面是我正在迭代的九个对象之一的示例

{
  "name": "Trap_808",
  "key" : "Q",
  "path": "https://firebasestorage.googleapis.com/v0/b/online-coding.appspot.com/o/drum%20samples%2Ftrap-808-08.wav?alt=media&token=c3c63635-45b0-4c99-82ff-e397f1153fa0"
}

下面是如何在构造函数中定义状态的。

this.state = { currentSound: '', triggerKeys: [] };

我要做的是添加 key 属性从对象到 triggerKeys 对象被迭代时的属性。这就是我用 .map() 方法。

<ul id="pad-shell">
  {
    DRUM_PATCH.map( sound =>{
      this.setState({ triggerKeys: [...this.state.triggerKeys, sound.key] });

      console.log(this.state);

      return <DrumButton
               name={sound.name}
               soundKey={sound.key}
               sourceLink={sound.path}
               trigger={this.updateSound}
             />
     });
   }
</ul>

我也试着像这样更新状态

this.setState( prevState =>{ return { triggerKeys: [...prevState.triggerKeys, sound.key] } });