これが尋ねられて答えられたが、私は検索して答えを見つけることができない場合はお詫び申し上げます。これはAjaxリクエストを初めて作成したので、私は何か間違ったやり方をしていると確信しています。助けやベストプラクティスのアドバイスは高く評価されます。ajaxリクエストの状態が変更された後に反応コンポーネントがリロードされない
問題は反応ページが読み込まれ、すべてのコンポーネントが空になっています。ドキュメントから：私が示すよ例では、私はcomponentDidMountを呼び出す関数を呼び出していますが、この方法（componentDidMount）にSETSTATE（）を呼び出す
は、余分なレンダリング
がトリガされます私は同じ機能を期待しています。そして、私のロジックをすべて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');
}