javascript - 如何在我的 div 元素中呈现更新后的状态？

Question

我设置了一个按钮:

1. 进行 API 调用以获取数据并列出以下标题的列表数据；
2. 返回这些标题；
3. 使用这些标题更新组件的“文本”状态
4. 在 div 中显示这些标题

看来所有这些事情都在发生；但也许不按顺序？我可以看出 this.state.text 按预期更新了标题，但 DOM 没有接收更新的状态。我已经以可以在样板 React 应用程序上的“index.js”文件中运行的格式附加了代码。

我尝试过打乱操作顺序，将 getAllPosts() 函数作为数组输出，以及无数的数组操作。

import React from 'react';
import ReactDOM from 'react-dom';



class AllPosts extends React.Component {
    constructor(props) {
      super(props);
      this.state = {text: 'poop'};
    }

    getAllPosts(){
      var request = new XMLHttpRequest();
      var titles=[];
      request.open('GET', 'http://jsonplaceholder.typicode.com/posts', true)
      request.onload = function () {
        var data = JSON.parse(this.response);   
        if (request.status >= 200 && request.status < 400) {
          data.forEach(post => {
            titles.push(post.title);
          })
        } else {
          console.log('error getting title list.  Please try again.');
        }
      }
      request.send();
      console.log(titles);
      return titles;
    }  

    onClickButton = () => {
      var allTitles = this.getAllPosts();
      this.setState({text: allTitles});
      console.log(this.state.text);
      console.log(this.allTitles);  
    }  

    render() {
      return (
        <div>
        <button
          onClick={this.onClickButton}>
            Get All Posts
        </button>
        <div>{this.state.text}</div>
        </div>
      );
    }
  }

  function App() {
    return (      
      <div className="App">
        <header className="App-header">

          <AllPosts />
        </header>
      </div>
    );
  }

  export default App;

ReactDOM.render(<App />, document.getElementById('root'));

(打开控制台)预期结果是 div 文本在单击时发生变化，从“poop”更改为标题列表。发生的情况是数据“未定义”并且文本被清空。再次单击按钮时，当我要求它记录 this.state.text 时，标题列表将填充在控制台中，因此它显然正在进入状态。但页面上的状态不会更新。

Answer 1

您需要将您的 XMLHttpRequest 包装在一个 promise 中:

getAllPosts = () => {
  new Promise((resolve, reject) => {
    var request = new XMLHttpRequest();
    var titles = [];
    request.open('GET', 'http://jsonplaceholder.typicode.com/posts', true)
    request.onload = function () {
      var data = JSON.parse(this.response);
      if (request.status >= 200 && request.status < 400) {
        data.forEach(post => {
          titles.push(post.title);
        })
        resolve(titles);
      } else {
        reject('error getting title list.  Please try again.');
      }
    }
    request.send()
  }).then(titles => {
    this.setState({ allTitles: titles })
  }).catch((error) => {
    console.log(error)
  })
}

您的 onClickButton() 现在应该只调用 getAllPosts() 而无需执行其他操作。

onClickButton = () => {
  this.getAllPosts()
}