Javascript 将返回的api数据设置为react状态

我正在尝试在下面设置此react组件的状态。变量rankAndTeam包含下面的prints=>数据。我希望华盛顿首都设置为此。state.teamRank[0]…纽约岛民设置为此。state.teamRank[1]等

    this.state = {
      teamRank: {
        0: "",
        1: "",
        2: "",
        3: "",
        4: "",
        5: "",
        6: "",
        7: "",
      }
    }
  }

  async componentDidMount() {
    const url2 = 'https://statsapi.web.nhl.com/api/v1/standings';
    const response2 = await fetch(url2);
    const data2 = await response2.json();
    data2.records.map((element) => {
      element.teamRecords.map((element2, index) => {
        const teamNames = element2.team.name;
        const rankAndTeam = teamNames + index;
        console.log(rankAndTeam);
      });
    }

印刷品

Main.js:80Washington Capitals0 Main.js:80名纽约岛居民1 Main.js:80匹兹堡企鹅2 Main.js:80卡罗莱纳飓风3 Main.js:80哥伦布蓝色夹克4 Main.js:80费城传单5 Main.js:80纽约游骑兵6 Main.js:80新泽西魔鬼7 反应组分：

Want to put this.state.teamRank.['0'] where Name0 is...
Want to put this.state.teamRank.['1'] where Name1 is etc... 

名字 姓 用户名 1. 名称0 奥托 @mdo 2. 名称1 桑顿 @肥 3. 姓名2 桑顿 @肥

---

问题的第二部分是简单的JSX：

                               <tr>
                                    <th></th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Username</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>{this.state.teamRank[0]}</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>{this.state.teamRank[1]}</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr><tr>
                                    <td>3</td>
                                    <td>{this.state.teamRank[2]}</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr>

---

您需要创建一个新对象作为您的新状态，然后将状态设置为此新对象，如下所示 由于不创建新数组，因此可以使用forEach而不是map

let newState = {}
element.teamRecords.forEach((element2,index) => {
          const teamNames = element2.team.name;
          const rankAndTeam = teamNames + index;
          console.log(rankAndTeam);
          // this will add a key of index (0,1,2,3...) with the team name as value 
          newState[index] = teamNames
   });
this.setState({ teamRank: newState})

在组件中，可以循环对象的关键帧并渲染信息

在这里，您正在创建一个tr数组，它的React将处理此问题并正确渲染它

  // rank will be (0,1,2,3...)
 {Object.keys(this.state.teamRank).map(rank => (
    <tr>
       <td>{rank + 1}</td>
       <td>{this.state.teamRank[rank]}</td>
       <td>Otto</td>
       <td>@mdo</td>
    </tr>
  ))}

data2.records数组包含4个对象。在每个对象中都有teamRecords数组，该数组本身包含8个对象

考虑到您只想显示前8条记录。你有两个选择

您需要让数组处于状态，而不是对象

this.state = {
    teamRank: []
}

选择1

创建一个数组，推送该数组中的每个名称，最后将该数组存储为state

let teamRank = [];
data2.records.map((element,ind)=>{
  element.teamRecords.map((element2,index) => {
    const teamNames = element2.team.name;
    const rankAndTeam = teamNames + index;
    console.log(rankAndTeam);
    teamRank.push(teamNames)
  });
})

this.setState({teamRank}, ()=>console.log(this.state.teamRank))

你可以打印出这样的名字

<tbody>
  <tr>
    <td>1</td>
    <td>{ this.state.teamRank && this.state.teamRank[0]}</td>
    <td>Otto</td>
    <td>@mdo</td>
  </tr>
  <tr>
    <td>2</td>
    <td>{ this.state.teamRank && this.state.teamRank[1]}</td>
    <td>Thornton</td>
    <td>@fat</td>
  </tr><tr>
    <td>3</td>
    <td>{ this.state.teamRank && this.state.teamRank[2]}</td>
    <td>Thornton</td>
    <td>@fat</td>
  </tr>
</tbody>

你可以打印名字，比如

<tbody>
  <tr>
    <td>1</td>
    <td>{ this.state.teamRank[0] && this.state.teamRank[0][0]}</td>
    <td>Otto</td>
    <td>@mdo</td>
  </tr>
  <tr>
    <td>2</td>
    <td>{ this.state.teamRank[0] && this.state.teamRank[0][1]}</td>
    <td>Thornton</td>
    <td>@fat</td>
  </tr><tr>
    <td>3</td>
    <td>{ this.state.teamRank[0] && this.state.teamRank[0][2]}</td>
    <td>Thornton</td>
    <td>@fat</td>
  </tr>
</tbody>

---

不准确的this.state.teamRank[1]登录未定义的对象

let teamRank = data2.records.map((element,ind)=>{
  return element.teamRecords.map((element2,index) => {  //Notice the return
    const teamNames = element2.team.name;
    const rankAndTeam = teamNames + index;
    console.log(rankAndTeam);
    return teamNames;  //Notice the return
  }); 
})

this.setState({teamRank}, ()=>console.log(this.state.teamRank))

<tbody>
  <tr>
    <td>1</td>
    <td>{ this.state.teamRank[0] && this.state.teamRank[0][0]}</td>
    <td>Otto</td>
    <td>@mdo</td>
  </tr>
  <tr>
    <td>2</td>
    <td>{ this.state.teamRank[0] && this.state.teamRank[0][1]}</td>
    <td>Thornton</td>
    <td>@fat</td>
  </tr><tr>
    <td>3</td>
    <td>{ this.state.teamRank[0] && this.state.teamRank[0][2]}</td>
    <td>Thornton</td>
    <td>@fat</td>
  </tr>
</tbody>