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

我正在尝试从https://github.com/TeamWertarbyte/material-ui-chip-input集成组件，我正在使用material-UI react组件，到目前为止，我所拥有的是：

搜索输入栏。当我键入一个艺术家时，它将返回结果。所以基本上是可行的。

现在，当我尝试实现时，按照说明进行操作没有任何结果。 （注意，ImButton和TextField被注释掉，因为我试图用ChipInput替换它们）

因此，如果键入“ aerosmith”，我将得到：

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;

编辑：

顺便说一句，如果我从（第110行）取消注释，直到（第133行）的末尾，它完全可以实现我想要的功能，但是却没有芯片（当然也没有ChipInput）

最佳答案

您不需要defaultValue，您只需要4件事（如果您需要自动完成）searchText，dataSource，onUpdateInput和Onchange。

材质UI自动完成和芯片属性相似，因此将它们应用于ChipInput，它们几乎相同。

最重要的是，您必须为在ChipInput中期望使用searchText的每个属性编写一个函数，该属性实际上可以是一个字符串。如您所见，ChipInput使用硬编码的值可能会很容易，但是当您开始使用API​​S时，它就不再那么容易了。重要的是要意识到onUpdateInput的作用

同样，您应该将在构造函数中编写的每个函数绑定在一起，这是一种反应模式，可以确保性能，可以在书中找到它。

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

然后在render方法上

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

    />