Javascript 在将API数据加载到React之前调用的render方法

完全初学者与反应。 我正试图制定出应对这种情况的标准方法

我正在访问一个api，返回的数据都正常，只是我试图将数据设置为组件的状态，render（）方法在返回任何数据之前引用状态，因此state属性被定义为“null”

在下面的代码示例中，您可以看到我正在登录到控制台，尽管事情的顺序不同，第二个日志是从浏览器返回的，而不是将state设置为API数据的日志

尽管使用了.then（），但如果您能提供任何帮助/解释，说明为什么会发生这种情况，我们将不胜感激

多谢各位

PS：为了简化，我删除了TeamList组件，但与“第二个日志”一样，该组件在数据实际被拉入之前被渲染

import React, { Component } from 'react';
class App extends Component {

constructor(props) {
  super(props);
  this.state = {
    data: null,
  }
}

componentDidMount() {
  const uri = 'http://api.football-data.org/v2/competitions/PL/teams'; 

  let h = new Headers()
  h.append('Accept', 'application/json')
  h.append('X-Auth-Token', 'XXXXXXXXXXXXXXXXXXXX')
  let req = new Request(uri, {
    method: 'GET',
    headers: h,
    mode: 'cors' 
  })

  var component = this;

  fetch(req)
   .then( (response) => {
    return response.json()    
   })
   .then( (json) => {
      this.setState({ data: json })
   })
   .then( (json) => {
      console.log( 'second log', this.state.data )
   })
   .catch( (ex) => {
      console.log('parsing failed', ex)
   })
   console.log( 'first log', this.state.data )
}

render() {
  return (
    <div>
      <div className="App">
      <TeamList list={this.state.data} />
    </div>

    </div>
  );
}
}

export default App;

import React，{Component}来自'React'；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：空，
}
}
componentDidMount（）{
常量uri=http://api.football-data.org/v2/competitions/PL/teams'; 
设h=newheaders（）
h、 追加（'Accept'，'application/json'）
h、 追加（'X-Auth-Token'，'XXXXXXXXXXXXXXXXXXXXX'）
let req=新请求（uri{
方法：“GET”，
标题：h，
模式：“cors”
})
var分量=此；
获取（请求）
。然后（（响应）=>{
返回response.json（）
})
。然后（（json）=>{
this.setState（{data:json}）
})
。然后（（json）=>{
console.log（'second log'，this.state.data）
})
.catch（（ex）=>{
console.log（'解析失败'，例如）
})
console.log（'first log'，this.state.data）
}
render（）{
返回(
);
}
}
导出默认应用程序；

您需要在渲染开始时添加类似的内容（）

因此，您的代码应该是：

render() {
  if (this.state.data === null) {
    return false;
  }

  return (
  <div>
    <div className="App">
      <TeamList list={this.state.data} />
    </div>
  </div>
  );
}

render（）{
if（this.state.data==null）{
返回false；
}
返回(
);
}

---

立即调用render（），但您希望它返回false，直到this.state.data有数据为止

您需要在render（）的开头添加类似的内容：

因此，您的代码应该是：

render() {
  if (this.state.data === null) {
    return false;
  }

  return (
  <div>
    <div className="App">
      <TeamList list={this.state.data} />
    </div>
  </div>
  );
}

render（）{
if（this.state.data==null）{
返回false；
}
返回(
);
}

---

render（）会立即被调用，但您希望它返回false，直到this.state.data有数据为止。当您装入组件时，它会立即与初始状态（您在构造函数中设置的）一起呈现。然后，当您稍后调用

setState

时，状态将更新，组件将重新加载。因此，在

状态之前显示类似“加载…”的内容是有意义的。数据
不为空：

 render() {
  return (
    <div>
      <div className="App">
      {this.state.data ? <TeamList list={this.state.data} /> : "loading..." }
    </div>
    </div>
  );
 }

实际上与：

    .then( (json) => {
       this.setState({ data: json })
       console.log( 'second log', this.state.data )
   })

这仍然会记录
null
，因为
setState
是异步的，这意味着调用它不会改变
this.state
现在，而是在某个时候。要正确记录，请使用回调：

 then( (json) => {
       this.setState({ data: json }, () => {
           console.log( 'second log', this.state.data )
       });
   })

当您装入组件时，它将立即与初始状态（您在构造函数中设置的）一起呈现。然后，当您稍后调用
setState
时，状态将更新，组件将重新加载。因此，在
状态之前显示类似“加载…”的内容是有意义的。数据
不为空：

 render() {
  return (
    <div>
      <div className="App">
      {this.state.data ? <TeamList list={this.state.data} /> : "loading..." }
    </div>
    </div>
  );
 }

实际上与：

    .then( (json) => {
       this.setState({ data: json })
       console.log( 'second log', this.state.data )
   })

这仍然会记录
null
，因为
setState
是异步的，这意味着调用它不会改变
this.state
现在，而是在某个时候。要正确记录，请使用回调：

 then( (json) => {
       this.setState({ data: json }, () => {
           console.log( 'second log', this.state.data )
       });
   })

只是一个想法：

import React, { Component } from 'react';

class App extends Component {

    constructor(props) 
    {
      super(props);

      this.state = {
       data: null,
      };

    }

    componentDidMount() 
    {
        fetch('http://api.football-data.org/v2/competitions/PL/teams')
        .then(response => response.json())
        .then(data => this.setState({ data }));
    }

    render() {
        return (
           <div>
                <div className="App">
                    <TeamList list={this.state.data} />
                </div>

           </div>
        );
    }
}

export default App;

import React，{Component}来自'React'；
类应用程序扩展组件{
建造师（道具）
{
超级（道具）；
此.state={
数据：空，
};
}
componentDidMount（）
{
取（'http://api.football-data.org/v2/competitions/PL/teams')
.then（response=>response.json（））
.then（data=>this.setState（{data}））；
}
render（）{
返回(
);
}
}
导出默认应用程序；

团队列表：

class TeamList extends React.Component {

    constructor(props) {
        super(props);
    }

    render(){

       return (
            <ul>
            {
                this.props.list.map((element, i) => {
                     return (
                        <li className="un-res t_d " key={i}>{element}</li>
                     )
                }
            })
     }
}

export default TeamList

类团队列表扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(

{
this.props.list.map（（元素，i）=>{
返回(
{element}
)
}
})
}
}
导出默认团队列表

快乐的编码！
只是一个想法：

import React, { Component } from 'react';

class App extends Component {

    constructor(props) 
    {
      super(props);

      this.state = {
       data: null,
      };

    }

    componentDidMount() 
    {
        fetch('http://api.football-data.org/v2/competitions/PL/teams')
        .then(response => response.json())
        .then(data => this.setState({ data }));
    }

    render() {
        return (
           <div>
                <div className="App">
                    <TeamList list={this.state.data} />
                </div>

           </div>
        );
    }
}

export default App;

import React，{Component}来自'React'；
类应用程序扩展组件{
建造师（道具）
{
超级（道具）；
此.state={
数据：空，
};
}
componentDidMount（）
{
取（'http://api.football-data.org/v2/competitions/PL/teams')
.then（response=>response.json（））
.then（data=>this.setState（{data}））；
}
render（）{
返回(
);
}
}
导出默认应用程序；

团队列表：

class TeamList extends React.Component {

    constructor(props) {
        super(props);
    }

    render(){

       return (
            <ul>
            {
                this.props.list.map((element, i) => {
                     return (
                        <li className="un-res t_d " key={i}>{element}</li>
                     )
                }
            })
     }
}

export default TeamList

类团队列表扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(

{
this.props.list.map（（元素，i）=>{
返回(
{element}
)
}
})
}
}
导出默认团队列表

愉快的编码！
考虑将加载布尔值添加到在获取链末尾设置为false的状态中。在呈现函数中使用条件语句加载缓冲符号或其他内容，直到加载变量设置为false。考虑将加载布尔值添加到在获取链末端设置为false的状态中