React Downshift autocomplete requests in an infinite loop

Question

I have the following React component

class Search extends Component {

constructor(props){
    super(props);
    this.state = {
        suggestions: []
    };
    this.getSuggestions = this.getSuggestions.bind(this);
}

renderSuggestion(){
    return (
        this.state.suggestions.map((suggestion, index) =>
            <MenuItem component="div" key={index} value={index} >
                {suggestion}
            </MenuItem>
         )
     );
};

getSuggestions (value) {
    const inputValue = deburr(value.trim()).toLowerCase();
    if(inputValue.length >= 3){
    axios.get('http://localhost:5001/api/v1/products',{
        params: {
            q: inputValue
        }
    }).then(response => {
        this.setState({suggestions : response.data.data });
    });
}
};

render() {
    const { classes } = this.props;
    return (
        <div className={classes.container}>
            <Downshift id="downshift-simple">
                {({
                      getInputProps,
                      getItemProps,
                      getMenuProps,
                      highlightedIndex,
                      inputValue,
                      isOpen,
                  }) => (
                    <div>
                        <TextField placeholder="Search a country (start with a)"
                                   fullWidth={true}
                                   onChange={this.getSuggestions(inputValue)}
                                   {...getInputProps()}
                        />
                        <div {...getMenuProps()}>
                            {isOpen ? (
                                <Paper className={classes.paper} square>
                                    {this.renderSuggestion}
                                </Paper>
                            ) : null}
                        </div>
                    </div>
                )}
            </Downshift>
        </div>
    );
}
}

export default withStyles(styles)(Search);

The autocomletion wors as expected as long as i do not perform an axios request in getSuggestions(). It seems to perform the request in an infinite loop as long as i do not refresh the page. Any ideas why this strange behaviour occures?

Jeeva · Accepted Answer · 2018-10-24T07:21:40.110

Because you are calling that function instead of passing the function to onChange. Kindly change your function to arrow function. refer this link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

getSuggestions (e) {
    let value = e.target.value
    const inputValue = deburr(value.trim()).toLowerCase();
    if(inputValue.length >= 3){
      axios.get('http://localhost:5001/api/v1/products',{
          params: {
              q: inputValue
          }
      }).then(response => {
          this.setState({suggestions : response.data.data });
      });
    }
};

<TextField placeholder="Search a country (start with a)"
  fullWidth={true}
  onChange={(e)=> this.getSuggestions(e)}
  {...getInputProps()}
/>

This fixed the issue of infinite calling the api! but now onChange is ever called, i guess there is still an issue (maybe misusage of Downshift). I'm using [material-ui approach of autocompletion](https://material-ui.com/demos/autocomplete/) as a reference. — SteelSailor, Oct 24 '18 at 06:56

React Downshift autocomplete requests in an infinite loop

1 Answers1