如何在ajax調用響應後更新響應es6組件？

我是新來的反應和es6，並試圖創建搜索字段，獲取一些數據的類型，如果用戶輸入最少3個字符的字段它使Ajax調用使用抓取API，但我沒有得到JSON數據，當我運行抓取代碼段代碼在瀏覽器控制檯中顯示json數據。我在我的代碼中做了什麼錯誤。如果我得到的數據，然後如何填充搜索列表我想知道什麼是一旦收到數據更新組件的最佳方式。在下面的代碼中，我創建了子組件，其中我有一個道具稱爲項目，我將通過狀態更新道具是正確的方式來重新呈現反應組件？如何在ajax調用響應後更新響應es6組件？

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;

來源

2017-01-23 nancy

使用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; 
    }); 
    };

來源

2017-01-23 12:01:14

目前我沒有在上面的代碼中傳遞用戶類型值，但我也需要傳遞用戶類型文本，所以我只需要在changeHandler方法中使用getLocationData？只是爲了提問的目的，我使用json佔位符api，但這將根據用戶輸入過濾數據 – nancy

如何在ajax調用響應後更新響應es6組件？

回答

相關問題