Question

我有一个rest API后端设置。但是，我有新的反应。我想在组件的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>
    );
  }
}

提前致谢！

Answer 1

您应该致电MyFunctionResults.Result以更改MyFunctionResults.IsNotCompleted值

＆＃13;

this.setState

＆＃13;

Answer 2

你应该做以下事情。首先，在public static void main(String[] args) throws IOException { //File being read: String fileName = "src/data/Belgium.csv"; //When 2nd parameter - ture, it gets so big, that excel can't handle it anymore... FileWriter writer = new FileWriter("src/dataNew/BelgiumNew5.csv", true); String[] nextLine; try (CSVReader reader = new CSVReader(new FileReader(fileName), ',', '"', 1)) { while ((nextLine = reader.readNext()) != null) { for (String line : nextLine) { line = line.replaceAll("T", " "); line = line.replaceAll("Z", ""); line = line.replaceAll("ActualGenerationPerUnit.mean", ""); line = line.replaceAll("Plantname:", ""); //Escaping curly braces is a must! line = line.replaceAll("\\{", ""); line = line.replaceAll("\\}", ""); writer.append(line); writer.append(System.lineSeparator()); System.out.println(line); } }System.out.println("Successfully written"); }catch(Exception e){ e.printStackTrace(); }finally { if (writer != null){ writer.flush(); writer.close(); } } }方法中创建state。这样，您就可以通过引用constructor在render方法中使用此值。 {this.state.jsonReturnedValue}方法是constructor()的ES6版本，以防您不知道这一点。您应该在此处设置组件的getInitialState()。

然后在state方法之后运行的componentDidMount中，您可以调用API调用api并使用React的render方法更新{{1}的值}}

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

this.setState()

Answer 3

在你的情况下 -

最好先用空状态数据完成渲染，然后再说

constructor(props){
    super(props);

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

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

从服务器获取新数据后，设置具有新数据的状态

this.setState({data:newDataFromServer});

例如componentDidMount

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

     });
}

这将导致重新呈现与从服务器获取的最新数据一起发生，并且将反映新的状态更改。

React - 从api设置初始状态

3 个答案: