如何在对象数组中排序键并仅渲染一个对象

Question

我有一系列的行星对象，并且我试图创建一个函数，该函数可以是其中一个行星，并且仅渲染一个行星。

我试图创建一个用于从阵列中选出行星的函数，但没有成功。

sortPlanet() {

const planet  = this.state.sort((a, b) => a.index > b.index )

}

我试图在地图前输入文字

const { data } = this.state

    const planets = data

    .sort((a, b) => a.index > b.index )

    .map((planet, index) => {

      return (<div key={index} className="app-container">

                <div>

                  <h1>{planet.name}</h1>

                </div>

                <div className="about-container">

                  <span>Population: {planet.population}</span>

                  <span>Climate: {planet.climate}</span>

                  <span>Terrain: {planet.terrain}</span>

                  <br />

                  <span>{planet.films.length}</span>

                </div>

              </div>)

    })

import './App.css';

class App extends Component {

  state = {

    data: [],

  }

  componentDidMount() {

    const url = 'https://swapi.co/api/planets/'

    fetch(url)

      .then(response => response.json())

      .then(response => {

        this.setState({

          data: response.results,

        })

      })

  }

  render() {

    const { data } = this.state

    const planets = data

    .map((planet, index) => {

      return (<div key={index} className="app-container">

                <div>

                  <h1>{planet.name}</h1>

                </div>

                <div className="about-container">

                  <span>Population: {planet.population}</span>

                  <span>Climate: {planet.climate}</span>

                  <span>Terrain: {planet.terrain}</span>

                  <br />

                  <span>{planet.films.length}</span>

                </div>

              </div>)

    })

    console.log(planets)

    return (

      <div className="App">

          {planets}  

        <button>Next</button>

      </div>

    )

  }

}

export default App;

我的目标是仅对一个星球进行分类，每当我单击“下一步”按钮时，都会调用该函数随机搜索另一个星球。