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

我有一个按钮设置为：

进行API调用以获取数据，并列出中的标题 数据； 归还那些头衔； 用这些标题更新我的组件的文本状态 在div中显示这些标题 似乎所有这些事情都在发生；然而，也许不符合规程？我可以看出this.state.text会按预期使用标题进行更新，但DOM没有收到更新的状态。我以一种可以在样板应用程序的“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时，标题列表将填充到控制台中，因此它显然进入状态。但是页面上的状态不会更新。

您需要将XMLHttpRequest包装在承诺中：

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)
  })
}

---

使用Axios进行API调用将使您的代码更简单、更易于使用，并且在视觉上更具吸引力

如果您对代码有任何疑问，请发表评论。 这是你的文件

从“React”导入React； 从“react dom”导入react dom； 从“axios”导入axios； 类AllPosts扩展React.Component{ 构造器{ 超级作物； this.state={text:'foo'}； } 异步getAllPosts{ var标题=[]； const response=等待axios.get'http://jsonplaceholder.typicode.com/posts' const data=response.data； data.forEachpost=>{ titles.pushpost.title； } 返回标题； } onClickButton=async=>{ var allTitles=wait this.getAllPosts； this.setState{text:allTitles}； } 渲染{ 回来 获取所有帖子 {this.state.text} ; } } 功能应用程序{ 回来 ; } 导出默认应用程序； ReactDOM.render，document.getElementById'root'；

---

您可以将请求封装在中，并从getAllPosts函数返回承诺

getAllPosts = () => {
  return 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 {
        console.log("fail")
        reject('error getting title list.  Please try again.');
      }
    }
    request.send();
  })
}

另一个简单的方法是使用

你的onClickButton功能应该是

onClickButton = () => {
  let allTitles = this.getAllPosts();
  allTitles.then(titles => {
     console.log("success");
     this.setState({ text: titles })
  }).catch((error) => { 
     console.log(error)
  })
}

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

---

此.setState{text:allTitles}时可能存在的副本；运行时，状态尚未设置。可以使用回调，也可以使用异步/等待承诺。为什么不使用fetch而不是XMLHttpRequest？我在这里回答了一个类似的问题——我尝试了您的代码示例，但API调用现在没有发生。XHR请求没有被发送，看起来像是？@n00bEternal抱歉，我忘了添加请求。发送。我已经更新了我的代码来包含它。不，我才是应该道歉的人。我将您的解决方案与我当前的产品进行了比较，应该已经看到了这一点。我是一个n00b，但不是一个多：谢谢你@别担心！在某种程度上，我们都是疯子：

getAllPosts = () => {
  fetch("http://jsonplaceholder.typicode.com/posts")
    .then(response => response.json())
    .then(titles => {
      console.log("success");
      let title = [];
      titles.forEach(post => {
          title.push(post.title);
      })
      this.setState({ text: title })
    }).catch((error) => {
        console.log(error)
    })
}

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