如何使用 React 随机渲染对象数组

Question

我是 React 新手，我在尝试通过其 id 从数组中渲染对象时遇到问题。我的意思是，我正在尝试生成一个随机数，并将该数字与数组中对象的 id 进行比较，然后呈现其完整的项目包。

这是我的 App.js：

import React, {Component} from 'react';
import './App.css';
import RandomAlbums from './RandomAlbums';


class App extends Component {
  render(){
    const albums = [
      {id: 1, cover: './Covers/Disintegration.jpg', band: "The Cure", title: "Disintegration"},
      {id: 2, cover: './Covers/In_A_Silent_way.jpg', band: "Miles Davis", title: "In a Silent Way"},
      {id: 3, cover: './Covers/In_Rainbows.jpg', band: "Radiohead", title: "In Rainbows"},
      {id: 4, cover: './Covers/Laughing_Stock.jpg', band: "Talk Talk", title: "Talk Talk"},
      {id: 5, cover: './Covers/The_Mantle.jpg', band: "Agalloch", title: "Tha Mantle"}
  ]

    return (
      <div className="App">
        <RandomAlbums albums={albums} />
      </div>
    );
  }
}

export default App;

这是我的（不完整的）RandomAlbum.js：

import React, {Component} from 'react';

class RandomAlbums extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: '',
            cover: '',
            band: '',
            title: ''
        };
    }


    getAlbum(albums){
      var random = Math.floor(Math.random() * 5);
      this.setState({id:random})
    }

  render(){
    return (
      <div>
        <button onClick={this.getAlbum}>Shuffle</button>
      </div>
    );
  }
}

export default RandomAlbums;

我只是想渲染一个随机播放按钮，当 onClick 时，我会随机获得一个带有乐队和专辑标题的封面。

提前致谢。

Answer 1

你可以从你在 props 中传递的相册变量中选择一个随机专辑：

class RandomAlbums extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: '',
            cover: '',
            band: '',
            title: ''
        };
    }


    getAlbum(){
      var random = Math.floor(Math.random() * 5);
      this.setState({...this.props.albums[random]})
    }

  render(){
    return (
      <div>
        <button onClick={this.getAlbum}>Shuffle</button>
      </div>
    );
  }
}

export default RandomAlbums;