将返回的 api 数据设置为反应状态

Question

我试图在下面设置这个反应组件的状态。变量 rankAndTeam 包含下面的“prints=>”数据。我希望将“华盛顿首都”设置为 this.state.teamRank["0"]..."New York Islander" 设置为 this.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 New York Islanders1
Main.js:80 Pittsburgh Penguins2
Main.js:80 Carolina Hurricanes3
Main.js:80 Columbus Blue Jackets4
Main.js:80 Philadelphia Flyers5
Main.js:80 New York Rangers6
Main.js:80 New Jersey Devils7

反应组件：

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

  <tr>
    <th></th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Username</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>Name0</td>
    <td>Otto</td>
    <td>@mdo</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Name1</td>
    <td>Thornton</td>
    <td>@fat</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Name2</td>
    <td>Thornton</td>
    <td>@fat</td>
  </tr>

Answer 1

你问题的第二部分是简单的 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>

编辑：在顶级 JSX 旁边试试这个：

     this.state = {
        teamRank:[
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            ""
        ]
    }
}
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;
                teamRank = this.state.teamRank
                teamRank[index] = name
                this.setState(teamRank: teamRank);
                const rankAndTeam = teamNames + index;
                console.log(rankAndTeam);
   });
}

Answer 2

您需要创建一个新对象作为您的新状态，然后将状态设置为这个新对象，如下所示 （由于您没有创建新数组，因此可以使用 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>
  ))}

Answer 3

您的 data2.records 数组包含 4 个对象。在每个对象中，您都有 teamRecords 数组，其中自身包含 8 个对象。

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

你需要有数组而不是对象，

this.state = {
    teamRank: []
}

选项 1

创建一个数组，将每个名称推送到该数组中，最后将该数组存储在状态中。

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>

Demo

---

选项 2

您可以通过迭代 data2.records 来创建一个数组数组

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>

Demo