ajax 请求更改状态后，反应组件不会重新加载

Question

如果有人提出并回答了这个问题，我深表歉意，但我已经搜索过但找不到答案。这是我第一次提出 Ajax 请求，所以我确定我做错了一些事情，我们将不胜感激任何帮助或最佳实践建议。

问题是我的 React 页面加载时所有组件都是空的。来自文档：

Calling setState() in this method (componentDidMount) will trigger an extra rendering

虽然在我展示的示例中，我正在调用一个调用 componentDidMount 的函数，但我期望具有相同的功能。而且，以防万一我通过将所有逻辑放入 componentDidMount 来测试它，并且我得到完全相同的行为。所以，我希望有一个暂时空白的屏幕，或者暂时显示硬编码状态，然后在通过 ajax 接收到状态时重新渲染。但是，它永远不会重新呈现。如果我通过按下按钮添加或删除项目来手动触发页面上的状态更改，我会立即看到来自 ajax 请求的所有数据。

状态硬编码时一切正常。

从 React Docs 和此处，我看到大多数人将 ajax 请求放在 componentDidMount 中，所以这就是我开始的地方。如果可以的话，我试图将所有请求保存在一个单独的文件中，但即使我删除了 loadEntries 函数和 getEntries 函数，并将所有处理放入 componentDidMount 中，我也会遇到同样的问题。如果它很重要，我们只是在谈论导入 20 个左右的对象，这些对象类似于那些硬编码到状态中的对象。

感谢您的帮助。如果我做了什么蠢事，请告诉我！

// My higher Order Component
import React, {Component} from 'react';
import Today from '../pages/Today';

export default class TodayContainer extends Component {
  constructor(props) {
  super(props);

  this.loadEntries = this.loadEntries.bind(this);

  this.state = {goalItems: [{entry_type: 1, date: "2017-12-20", id: 3, content: "other good stuff", completed: 1}],
                targetItems: [{entry_type: 2, date: "2017-12-20", id: 3, content: "Fix my hat", completed: 1}],
                successItems: [{entry_type: 3, date: "2017-12-20", id: 3, content: "Petted Cat"}],
                quoteItem: {entry_type: 4, date: "2017-12-20", id: 1, content: "This is a quote.", author: "me"}};
  }

componentDidMount() {
  this.loadEntries();
}

loadEntries() {
  let goalArray = [];
  let targetArray = [];
  let successArray = [];
  let quote = {};
  let scheduleArray = [];

Network.getEntries().then((entries) => {
  for (let entry of entries.data) {
    switch (entry.entry_type_id) {
      case 1:
          goalArray.push(entry);
          break;
      case 2:
          targetArray.push(entry);
          break;
      case 3:
          successArray.push(entry);
          break;
      case 4:
          quote = entry;
          break;
      case 5:
          scheduleArray.push(entry);
    }
  }
});

  let stateInit = {
    goalItems: goalArray,
    targetItems: targetArray,
    successItems: successArray,
    quoteItem: quote,
    scheduleItems: scheduleArray
  };

  this.setState(stateInit);
  }


//My Network File.
import axios from 'axios';

export function getEntries(){
  return axios.get('http://localhost:8000/api/entry');
}

Answer 1

我认为您只是想将 let stateInit... this.setState 代码移动到请求的 then 块中，以便它在请求完成后执行。

Answer 2

您的 setState 调用正在 Network.getEntries 的 Promise 解决之前执行。所以你必须在 then

中调用它

loadEntries() {
  let goalArray = [];
  let targetArray = [];
  let successArray = [];
  let quote = {};
  let scheduleArray = [];

Network.getEntries().then((entries) => {
  for (let entry of entries.data) {
    switch (entry.entry_type_id) {
      case 1:
          goalArray.push(entry);
          break;
      case 2:
          targetArray.push(entry);
          break;
      case 3:
          successArray.push(entry);
          break;
      case 4:
          quote = entry;
          break;
      case 5:
          scheduleArray.push(entry);
    }
  }

  let stateInit = {
    goalItems: goalArray,
    targetItems: targetArray,
    successItems: successArray,
    quoteItem: quote,
    scheduleItems: scheduleArray
  };

  this.setState(stateInit);
});
}

ajax 请求更改状态后，反应组件不会重新加载

react component does not reload after ajax request changes state

ajax

state

reactjs

axios