ReactJS：设置状态后状态为空然后设置值

Question

我试图制作一个简单的 SPA 只是为了学习 reactJS。我正在尝试使用 RIOT API (developer.riotgames.com) 但我没有用！

这是我的代码：

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

class App extends Component {

  constructor() {
    super();
    this.state = {
      riotAPIdata: []
    }
  }

  componentWillMount() {
    fetch('https://global.api.riotgames.com/api/lol/static-data/BR/v1.2/champion?champData=image%2Cinfo%2Cstats%2Ctags&dataById=false&locale=pt_BR&api_key=RGAPI-0ed56255-77e0-4002-8e44-024f74be8249')
      .then(response => response.json())
      .then(riotAPI => { this.setState({ riotAPIdata: riotAPI.data }) })

  }

  render() {

    if (this.state.riotAPIdata !== {}) {
      console.log(this.state.riotAPIdata)
    } else {
      console.log("Carregando")
    }

    return (
      <div className="App">
        <Header />
        <div className="App-intro">
            {this.state.riotAPIdata.map((obj, i) => {
              return <p key={i}>{obj.name}</p>
            })}
        </div>
      </div>
    );
  }
}

export default App;

控制台显示以下错误：

首先它记录了同一行两次，然后映射不起作用！有帮助吗？

Answer 1

Felix Kling 在他的评论中所说的完全正确，我过去使用过类似的东西并且我能够使用地图，也许它可能对你有帮助，在你的 'componentWillMount' 中尝试这样的东西

var response_json = response.json
this.setState({riotAPIdata: response_json.data.map((val) => {
              return {
                val: val
              };
         )})

然后你可以在你的渲染方法中使用像这样的值

{this.state.riotAPIdata.map((obj, i) => {
          return <p key={i}>{obj.val.name}</p>
        })}

好像我不确定 riotAPIdata 的结构，但尝试一下，它肯定会起作用。

希望对您有所帮助！

ReactJS：设置状态后状态为空然后设置值

ReactJS: State is empty after setState then value is set

reactjs

fetch

array.prototype.map