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

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