反應，也能收到無法讀取的不確定上搜索輸入屬性「價值」

Question

我試着給< ChipInput />組件從https://github.com/TeamWertarbyte/material-ui-chip-input我使用的材料界面反應組件和集成到目前爲止我有什麼是：

搜索輸入欄。當我鍵入藝術家時，它會返回結果。所以基本上是在工作。

現在，當我嘗試執行< ChipInput />，按照說明我沒有得到任何結果。 （注意IconButton和TextField在林被註釋掉的嘗試與ChipInput來代替它們）

因此，如果我輸入 「史密斯飛船」 我會得到：

FETCH_URL而不是https://itunes.apple.com/search?term=&limit=4

FETCH_URL https://itunes.apple.com/search?term=aerosmith&limit=4

所以，這就像沒有采取我的setState查詢的原因。我嘗試了componentWillReceiveProps，但它沒有幫助。有什麼建議麼 ？

class Searcher extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     query: [], 
     application: null, 
    } 
    } 

    componentDidMount() { 
    this.handleSearchRequest(); 
    } 



    handleSearchRequest() { 
    console.log('this.state', this.state); 

    // we will replace BASE_URL with Anu's search api 
    const BASE_URL = 'https://itunes.apple.com/search?'; 

    const FETCH_URL = BASE_URL + 'term=' + this.state.query + '&limit=4'; 

    console.log('FETCH_URL', FETCH_URL); 

    fetch(FETCH_URL, { 
     method: 'GET' 
    }) 

    // Initial test to see what the console response is after hiting the API 
    // .then(response => console.log('response', response)); 

     .then(response => response.json()) 
     // const applications = response.data 
     // this.setState({applications}) 

    //testing the json results 
     .then(json => { 
      // console.log('json', json) 

      const application = json.results[0]; 
      this.setState({application}) 
      console.log({application}) 


     }); 
    } 

    handleChange(event) { 
    this.setState({ query: event.target.value}) 
    } 


    render() { 

    return (
     <div style={{position: 'relative'}}> 

      {/* <IconButton 
      iconStyle={styles.smallIcon} 
      style={styles.iconButton} 
      onClick={() => this.handleSearchRequest()} 
      > 
       <Search color={black} /> 

      </IconButton> 

      <TextField 
      underlineShow={false} 
      id="searchId" 
      value={this.state.query} 
      fullWidth={true} 
      style={styles.textField} 
      inputStyle={styles.inputStyle} 
      hintStyle={styles.hintStyle} 
      onChange={event => {this.setState({ query: event.target.value}) }} 
      onKeyPress={event => { 
       if (event.key === 'Enter') { 
       this.handleSearchRequest() 
       } 
      }} 
      /> */} 

     <br/> 
     <br/> 

     <ChipInput 
      fullWidth={true} 
      defaultValue={this.state.query} 
      onChange={(event) => this.handleChange(event)} 
     /> 

     { 
      this.state.application != null 
      ? 
      <ResultItem 
       {...this.props} {...this.state} 
       application={this.state.application}/> 
      : <div></div> 
     } 
     </div> 

    ); 
    } 
} 

export default Searcher; 

編輯：

順便說一句，如果我從< IconButton />（線110）取消註釋直到<的TextField />（線133）的端部確實準確我想要什麼，但沒有芯片（當然沒有ChipInput）

Answer 1

你不需要defaultValue所有你需要的是4件事（如果你想自動完成）searchText，dataSource，onUpdateInput和Onchange。

Material UI的自動完成和芯片屬性是相似的，所以將它們應用到ChipInput，它們幾乎是一樣。

底線是你必須爲你在ChipInput期望的searchText中使用的每個屬性編寫一個函數，它實際上可以是一個字符串。正如你所看到的，ChipInput可能很容易使用硬編碼值，但是當你開始使用API​​S時，它不再那麼容易了。重要的是要認識到什麼onUpdateInput確實

此外，你應該每次你寫的構造，這是一個反應模式，確保性能，發現它在一本書中綁定功能。

constructor(props) { 
    super (props) 
    this.onUpdateInput = this.onUpdateInput.bind(this); 
    this.onNewRequest = this.onNewRequest.bind(this); 
} 

然後在渲染方法

<ChipInput 
     searchText={this.state.query} 
     fullWidth={true} 
     dataSource={this.state.dataSource} 
     onUpdateInput={this.onUpdateInput} 
     onChange={this.onNewRequest} 

    />