Material UI Reactアプリケーションのリモートデータソースでレンダリングされないオートコンプリート

Question

React 15.0.1とMaterial-UI 0.15.0を使用しています。 Reactを使ってオートコンプリートをレンダリングしようとしています。

import React from 'react'; 
 

 
import SomeService from '../../../services/SomeService'; 
 

 
import AutoComplete from 'material-ui/AutoComplete'; 
 

 
class SearchInput extends React.Component { 
 
    constructor (props) { 
 
    super(props); 
 
    
 
    this.state = { 
 
     dataSource: [] 
 
    }; 
 
    } 
 
    
 
    searchSomething (value) { 
 
    if (value.length) { 
 
     SomeService.fetchAutocomplete({searchQuery: value}) 
 
     .then((res) => this.handleSuccess(res.data), 
 
       (err) => this.handleFailure(err)); 
 
    } else { 
 
     this.setState({ 
 
     dataSource: [] 
 
     }); 
 
    } 
 
    }; 
 
    handleSuccess (response) { 
 
    this.setState({dataSource: response.slice(0, 10)}); 
 
    } 
 
    handleFailure (err) { 
 
    console.log(err); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div> 
 
     <AutoComplete 
 
      floatingLabelText='Enter test' 
 
      dataSource={this.state.dataSource} 
 
      onUpdateInput={(val) => this.searchSomething(val)} 
 
      fullWidth={true} /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default SearchInput;

私はデータと応答オブジェクトを取得すると仮定するとは：[...]原料の配列を//ここに私のコードです。 これはレンダリングされていません。誰も私を助けることができる

reponse: { 
 
    ...., 
 
    data: ['Apple', 'Banana', 'Orange'], 
 
    .... 
 
}

：

レスポンスオブジェクトは、のようなものでしょうか？

Answer 1

thisによれば、あなたはすべてを真に渡すことによってフィルタ機能をスキップしなければなりませんでした。

<AutoComplete 
      floatingLabelText='Enter test' 
      dataSource={this.state.dataSource} 
      onUpdateInput={(val) => this.searchSomething(val)} 
      fullWidth={true} 
      filter={(searchText, key) => true} />