在无限循环中反应降档自动完成请求

Question

我有以下 React 组件

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);

只要我不在 getSuggestions() 中执行 axios 请求，自动完成就会按预期进行。只要我不刷新页面，它似乎就在无限循环中执行请求。知道为什么会发生这种奇怪的行为吗？

Answer 1

因为您正在调用该函数而不是将该函数传递给 onChange。请将您的功能更改为箭头功能。参考这个 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()}
/>

在无限循环中反应降档自动完成请求

React Downshift autocomplete requests in an infinite loop

reactjs

axios

downshift