Javascript 如何使用.map遍历对象？

我有一个应用程序，可以根据你按下的按钮播放所选阵列中的随机声音。我还想提供一个选项，根据需要列出数组中的所有声音

我一直在研究各种不同的关于使用for循环和.map的建议，但我总是遇到一堵墙，因为我无法在对象上使用.map。。。我想

class Randomizer extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      currentSound: {name: "laser", sound: "http://commondatastorage.googleapis.com/codeskulptor-assets/Collision8-Bit.ogg"},
        myArray: [
          {
            name: 'laser',
            sound: "http://commondatastorage.googleapis.com/codeskulptor-assets/Collision8-Bit.ogg"
          },
          {
            name: 'laugh',
            sound: "http://commondatastorage.googleapis.com/codeskulptor-assets/Evillaugh.ogg"
          },
          {
            name: 'jump',
            sound: "http://commondatastorage.googleapis.com/codeskulptor-assets/jump.ogg"
          }
        ],
        myArraySequel: [
          {
            name: 'laser2',
            sound: "http://commondatastorage.googleapis.com/codeskulptor-assets/Collision8-Bit.ogg"
          },
          {
            name: 'laugh2',
            sound: "http://commondatastorage.googleapis.com/codeskulptor-assets/Evillaugh.ogg"
          },
          {
            name: 'jump2',
            sound: "http://commondatastorage.googleapis.com/codeskulptor-assets/jump.ogg"
          }
        ]
        }
  }

  newSound(arr){
    this.setState((prevState)=>{
      return {currentSound: prevState[arr][Math.floor(Math.random()*prevState[arr].length)]}
    })
  };



  render() {
    return (
      <div>
        <button onClick={()=>{this.newSound('myArray')}}>Sounds from myArray</button>
        <button onClick={()=>{this.newSound('myArraySequel')}}>myArraySequel</button>
        <div>
            Listen! 
            <audio
              autoPlay
              src={this.state.currentSound.sound}>            
            </audio>
            <h2>{this.state.currentSound.name}</h2>           
        </div>
        <div>
          <h2>sounds from myArray</h2>
          {/* list of buttons with the name value as the the button name and it will play the sound associated when pressed */}
        </div>
      </div>
    );
  }
}

function App() {
  return (
    <div className="App">
     <h1>RandomSoundboard</h1>
     <Randomizer />
    </div>
  );
}

export default App;

类随机化器扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
当前声音：{名称：“激光”，声音：http://commondatastorage.googleapis.com/codeskulptor-assets/Collision8-Bit.ogg"},
myArray：[
{
名称：“激光”，
声音：“http://commondatastorage.googleapis.com/codeskulptor-assets/Collision8-Bit.ogg"
},
{
名字：“笑”，
声音：“http://commondatastorage.googleapis.com/codeskulptor-assets/Evillaugh.ogg"
},
{
名称：'跳跃'，
声音：“http://commondatastorage.googleapis.com/codeskulptor-assets/jump.ogg"
}
],
myArraySequel：[
{
名称：'laser2'，
声音：“http://commondatastorage.googleapis.com/codeskulptor-assets/Collision8-Bit.ogg"
},
{
名字：'laugh2'，
声音：“http://commondatastorage.googleapis.com/codeskulptor-assets/Evillaugh.ogg"
},
{
名称：'jump2'，
声音：“http://commondatastorage.googleapis.com/codeskulptor-assets/jump.ogg"
}
]
}
}
新声（arr）{
this.setState（（prevState）=>{
返回{currentSound:prevState[arr][Math.floor（Math.random（）*prevState[arr].length）]]
})
};
render（）{
返回(
{this.newSound（'myArray'）}>从myArray发出声音
{this.newSound（'myArraySequel'）}>myArraySequel
听
{this.state.currentSound.name}
来自myArray的声音
{/*以名称值作为按钮名称的按钮列表，按下时将播放相关声音*/}
);
}
}
函数App（）{
返回(
随机音板
);
}
导出默认应用程序；

---

当我使用.map时，它告诉我当然要使用数组。

你可以很容易地做到这一点

语法应该是

array.map((element,index)=>(
  <button>{element.name}</button>
))

array.map（（元素，索引）=>(
{element.name}
))

您的代码如下所示

{
this.state.myArray.map（（元素，索引）=>(
{element.name}
))
}

您可以轻松做到这一点

语法应该是

array.map((element,index)=>(
  <button>{element.name}</button>
))

array.map（（元素，索引）=>(
{element.name}
))

您的代码如下所示

{
this.state.myArray.map（（元素，索引）=>(
{element.name}
))
}

@JoshWren欢迎您，您可以接受我的答案（如果它对您有帮助的话）以备将来使用ones@JoshWren欢迎您，您可以接受我的答案（如果它对您有帮助的话）以供将来参考