反应，不断获取无法读取搜索输入上未定义的属性“值”

Question

Im trying to integrate the < ChipInput /> component from https://github.com/TeamWertarbyte/material-ui-chip-input I'm using material-UI react component and so far what I have is:

A search input bar. When I type an artist it returns a result. so basically is working.

Now, when I try to implement < ChipInput /> , following the instructions I get no results. (note IconButton and TextField are commented out as in Im trying to replace them with ChipInput)

Therefore, if I type "aerosmith" I'll get:

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

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

so , it's like is not taking my setState query for a reason. I tried componentWillReceiveProps but it didnt help. Any suggestions ?

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;

EDIT:

By the way, if I uncomment from < IconButton /> (line 110) til the end of < TextField /> (line 133) it does exactly what I want , but no chips ( with no ChipInput of course)

Answer 1

You dont need a defaultValue all you need is 4 things (if you want autocomplete) searchText, dataSource, onUpdateInput and Onchange.

Material UI autocomplete and chips properties are similar so apply them to ChipInput, they are almost the same.

Bottom line is you have to write a function for every property you use within ChipInput expect for searchText, which can actually be a string. As you can see, ChipInput might be easy with hardcoded values, but when you start hitting APIS it is not so easy anymore. it is important to realize what onUpdateInput does

Also, you are supposed to bind every function you write within the constructor this is a react pattern that ensures performance, found it on a book.

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

Then on the render method

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

    />