Question

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

我一直在研究使用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;

当我使用.map时，它被告知要使用一系列数组。

Answer 1

您可以轻松地做到这一点，

语法就像

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

您的代码将是这样

{
  this.state.myArray.map((element,index)=>(
      <button>{element.name}</button>
  ))
}

如何使用.map遍历对象？

1 个答案: