React // 在状态下显示映射数组的键

Question

我从一个开放的 api 接收数据，该数据存储在 state 的数组中。然后我映射数组以在列表项中输出它并另外给它们键。 （目前有效）

1. 我想在另一个列表项中显示数组中每个元素的位置。 （这不起作用）。 （结果当然应该是 1-17）。
2. 然后我想将每个元素位置与给定位置进行比较。所以，如果 ItemPosition[5] = 6 做...

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


class App extends Component {

  state = {
    teams: []
  }

  componentDidMount() {
    axios.get(`https://www.openligadb.de/api/getbltable/bl1/2019`)
      .then(res => {
        const teams = res.data;
        this.setState({ teams });
      })
  }

  render() {
    return(
    <ul>
      {this.state.teams.map(p => <li key={p.id}>{p.TeamName}</li>)}
      // next line is not correct
      {this.state.teams.map(t => <li key={t.id}>{t.key}</li>)}
    </ul>
  );
  }
}


export default App;

Answer 1

您可以像这样访问数组的索引作为 map 的第二个参数：

{this.state.teams.map((t, index) => <li key={t.id}>{index}</li>)}

您可以使用此索引来比较项目。

希望这会有所帮助。