Question

我正在尝试从网页获取数据并将内容打印到屏幕上。这是HTTP get请求的代码：

https.get('https://jsonplaceholder.typicode.com/users', (resp) => {
      let data = '';

      // A chunk of data has been received.
      resp.on('data', (chunk) => {
          data += chunk;
      });

      // The whole response has been received. Print out the result.
      resp.on('end', () => {
          for (let i = 0; i < JSON.parse(data).length; i++)
              cities += JSON.parse(data)[i].address.city + '\n';
          console.log(cities);
      });

在下面的代码中，我无法将其打印到屏幕上。我在Google上进行了搜索，但没有提出解决方案。

let printing = "All users data:";
  return <div className="App">
      <header className="App-header">
          <p>
              {printing}
          </p>
          <p>
              {cities}
          </p>
      </header>
  </div>;

在这里我可以打印打印字符串，但是我不能打印城市字符串。这是什么原因？（完整代码可在https://github.com/ezinal/reacttask/blob/master/src/App.js中找到（39行）

Answer 1

您正在更新http请求完成回调之外的状态，因此状态将在http请求完成之前更新，即this.setState在http请求启动之后立即调用，而不是在请求完成之后调用。您需要将this.setState({cities : getCities})移至resp.on('end', ...)回调中，如下所示：

resp.on('end', () => {
    for (let i = 0; i < JSON.parse(data).length; i++)
        getCities += JSON.parse(data)[i].address.city + '\n';
    console.log(getCities);
    this.setState({cities : getCities}); // <-- update state here once http request has completed
});

无法使用ReactJS打印字符串

1 个答案: