ajax呼び出しからの応答後にreact es6コンポーネントを更新するにはどうすればよいですか？

Question

私は反応してes6に新しく、検索フィールドを作成しようとしましたが、ユーザータイプがフィールドに最小3文字の場合はデータを取得します。フェッチapiを使用してajax呼び出しを行いますが、フェッチスニペットコードを実行しているとき、ブラウザでjsonデータを表示します。何が私のコードでやっている間違っている。データが取得された場合、検索リストにデータを挿入する方法受信したデータを一度更新する最良の方法は何かを知りたい。下のコードでは、アイテムと呼ばれる1つの小道具を持つサブコンポーネントを作成しました。これは、反応コンポーネントを再レンダリングする正しい方法です。

import React from 'react'; 
import SearchList from "./searchlist" 

class SearchField extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {SearchText:null,SearchData:{},KeyState:false, items:[]}; 
    }; 
    GetLocationData(){ 
    fetch("http://jsonplaceholder.typicode.com/albums") 
      .then((response) => { 
       return response.json() }) 
       .then((json) => { 
        return json; 
    }); 
    }; 
    ChangeHandler(e){ 
     e.preventDefault(); 
     let isKeyUp = this.state.KeyState, 
      SearchFieldLength = e.target.value, 
      KeyLength = this.props.KeyRefresh; 

     if(!isKeyUp && SearchFieldLength.length > KeyLength){ 
      let jsonData = this.GetLocationData(); 
      //this.setState({SearchData:jsonData,KeyState:true}) 
      console.log(jsonData); 
     } 
    }; 
    componentDidMount(){ 

    }; 
    render() { 
    let PlaceholderText = this.props.PlaceHolderText; 

    return (
     <div className="input-text-area"> 
      <input type="text" placeholder={PlaceholderText} onChange={this.ChangeHandler.bind(this)} /> 
      <SearchList items={this.state.items} /> 
     </div> 
    ); 
    } 
} 

export default SearchField; 

Answer 1

使用componentDidMount

componentDidMount { 
    this.GetLocationData(); 
} 

あなたはcompnentDidMountを使用して、そこからGetLocationData()を呼び出す必要があります。 GetLocationData()メソッドでstateを更新する必要があります。次に、レンダリングメソッドが自動的に呼び出されます。

GetLocationData(){ 
    fetch("http://jsonplaceholder.typicode.com/albums") 
      .then((response) => { 
       return response.json() }) 
       .then((json) => { 
        this.setState({ 
         items: json 
        }) 
        return json; 
    }); 
    };