Как обновить реакцию компонента es6 после ответа от ajax-вызова?

Question

Я новичок, чтобы реагировать и es6 и пытаюсь создать поле поиска, которое извлекает некоторые данные по типу, если пользователь вводит минимум 3 символа в поле своего make ajax-вызова, используя fetch api, но я не получаю json-данные, когда запускаю код фрагмента fetch в консоли браузера отображаются данные json. что я делаю в своем коде. если я получу данные, то как заполнить список поиска, я хочу знать, что является лучшим способом обновления компонента после получения данных. в нижеприведенном коде я создал подкомпонент, где у меня есть один prop, называемый элементами, которые я обновлю через состояние, это правильный способ повторного рендеринга реагирующего компонента?

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() оттуда. Вам нужно будет обновить свой state в методе GetLocationData(), который затем автоматически вызовет метод визуализации.

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