Question

我从打开的api接收数据，该api处于状态存储在数组中。然后，我映射了数组以将其输出到列表项中，并另外给了它们键。（到目前为止，这是可行的）

我想在另一个列表项中显示数组中每个元素的位置。（这不起作用）。（结果应该是1-17）。
然后，我想将每个元素的位置与给定位置进行比较。因此，如果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>)}

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

希望这会有所帮助。

React //显示处于状态的映射数组的键

1 个答案: