Javascript 如何从API数据设置初始反应状态？

我已经设置了RESTAPI后端。我想在组件的

getInitialState

函数中设置值，但我不知道如何填充需要返回的对象，因为我使用的是异步http请求。正如预期的那样，我返回的对象具有未定义的值。我该怎么做

我现在正在使用fetch（老实说，可以切换到任何其他库）。我不知道如何在异步调用返回一些值之后而不是在它发生之前调用

getInitialState

import React from 'react';
import 'whatwg-fetch';

export default class IndexPage extends React.Component {

  render() {

    // I basically need to call getInitialState after the last promise has been resolved
    fetch('https://localhost:3000/api/aye')
    .then(function(response) {
      return response.json();
    })
    .then(function(json) {
      // Need to return some values from this.
    });

    return (
      <div>
        <h1>{this.state.jsonReturnedValue}</h1>
      </div>
    );
  }
}

从“React”导入React；
导入“whatwg fetch”；
导出默认类IndexPage扩展React.Component{
render（）{
//我基本上需要在解决最后一个承诺后调用getInitialState
取（'https://localhost:3000/api/aye')
.然后（功能（响应）{
返回response.json（）；
})
.then（函数（json）{
//需要从中返回一些值。
});
返回(
{this.state.jsonReturnedValue}
);
}
}

---

提前谢谢

你应该做以下几点。首先，在

构造函数

方法中创建

状态

。然后，这将允许您通过引用

{This.state.jsonReturnedValue}

在

render

方法中使用此值。

constructor（）

方法是

getInitialState（）

的ES6版本，以防您不知道这一点。这是您应该设置组件的

状态的地方

然后在
componentDidMount
中，它将在
render
方法之后运行，您可以使API调用API，并使用React的
setState
方法更新
this.state.jsonReturnedValue
的值

当运行
this.setState（）
并设置新值时，它将再次运行
render
方法并相应地更新视图

export default class IndexPage extends React.Component {

   constructor(){
     super();
     this.state = {
        jsonReturnedValue: null
     }
   }

  componentDidMount() {
    this.jsonList();
  }

  jsonList() {
     fetch('https://localhost:3000/api/aye')
    .then(function(response) {
      this.setState({
        jsonReturnedValue: response.json()
      }) 
    })
  }

  render() {
    return (
      <div>
        <h1>{this.state.jsonReturnedValue}</h1>
      </div>
    );
  }
}

导出默认类IndexPage扩展React.Component{
构造函数（）{
超级（）；
此.state={
jsonReturnedValue:null
}
}
componentDidMount（）{
this.jsonList（）；
}
jsonList（）{
取（'https://localhost:3000/api/aye')
.然后（功能（响应）{
这是我的国家({
jsonReturnedValue:response.json（）
}) 
})
}
render（）{
返回(
{this.state.jsonReturnedValue}
);
}
}
您应该调用
this.setState
以更改
状态
值


导出默认类IndexPage扩展React.Component{
构造函数（）{
超级（）；
此.state={
jsonReturnedValue:null
}
}
componentDidMount（）{
取（'https://localhost:3000/api/aye')
.then（response=>response.json（））
。然后（json=>{
this.setState（{jsonReturnedValue:json}）；
});
}
render（）{
返回(
{this.state.jsonReturnedValue}
);
}
}
在您的情况下-

最好是第一次使用空状态数据进行渲染

constructor(props){
    super(props);

    this.state = {
        data : []
    };
}

并在
componentDidMount
中进行ajax调用，在这里可以执行dom操作并通过
REST
发送
ajax
请求以获取数据

从服务器获取新数据后，使用新数据设置状态

this.setState({data:newDataFromServer});

e、 g In
componentDidMount

componentDidMount() {
 sendAjaxRequest()
 .then(
      (newDataFromServer) => {
              this.setState({data : newDataFromServer });

     });
}

这将导致重新呈现从服务器获取的最新数据，并反映新的状态更改。
这就是我的想法。我基本上是在检查身份验证。当我第一次将isLogged状态设置为false，然后在调用后将其设置为true时，在显示logged in页面之前，会出现not logged in页面的闪烁。想知道如何摆脱它。@Zeokav可能需要添加新的状态，例如
加载
——只添加了一个加载组件和另一个状态。工作完美。谢谢，伙计。：）