Question

我正在尝试在下面设置此React组件的状态。变量rankAndTeam包含下面的“ prints =>”数据。我希望将“ Washington Capitals”设置为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

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

您的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

Answer 3

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

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

3 个答案: