如何使用map函數和給定索引為數組元素設置特定位置？

Question

我正在使用一個反應站點，該站點顯示來自服務器的動態數據。 這是父母的內容。

  axiosFunc = () => {

  axios.get('https://api.warframestat.us/pc').then(results => {
  this.setState({
    fissures: results.data.fissures
  });

  console.log(this.state.fissures)

      setTimeout(this.axiosFunc,1000 * 60);
    })
  }

  componentDidMount() {
    this.axiosFunc();
  }

現在，當我在子元素中使用map函數時，數據會彈出...

  render() {
return(
  <main>
    <header>{this.props.whichEvent.toUpperCase()}</header>
    {
      this.props.theData.map(
        fissure => {
          return (
            <section key={fissure.id}>
              <h1>{fissure.missionType} // {fissure.node}</h1>
              <figure className="leftfigure">
                <img src={require(`../icons/${fissure.tier}.svg`)} alt=""/>
                <figcaption></figcaption>
              </figure>
              <figure>
                <figcaption></figcaption>
              </figure>
            </section>
          )
        }
      )
    }
  </main>
)
}

但是，無論服務器將對象傳遞給我的順序如何，都可以得出結果。 我想根據每個對象中的fissure.tierNum值對它們進行排序。 該數字從1到4，具體取決於對象。 當我使用map制作元素時，如何獲取該數字並根據其對元素進行排序？

Answer 1

只需在地圖功能之前添加排序功能即可按所需的鍵進行排序

this.props.theData.sort((a,b) => {
  if(a.tierNum < b.tierNum) {
    return -1;
  }
  else return 1;
}).map(...)

您可以在MDN文檔中了解有關排序功能的更多信息