Question

我只在用户每当输入值改变时按Enter键时设置状态

然后，用户将被引导至包含搜索结果的单独页面

看起来像

handleSearch(e){
   this.setState({
    searchValue: e.target.value
   }, ((value)=>{
      if(e.key === 'Enter'){ 
       history.push('/search/')
      } 
   })(this.state.searchValue));


}

<input onKeyPress={this.handleSearch} />

然后在组件处理搜索结果

中

class SearchResults extends Component {
    constructor(props){
    super(props);

    this.state = {
        results : [],
        grabbedSearch: '',
        resultMessage: ''
    }

    this.grabSearchResults = this.grabSearchResults.bind(this);
 }

  componentWillUpdate(){
      this.grabSearchResults() 
  }

  componentDidMount(){
    this.grabSearchResults();
  }

  grabSearchResults(){
    //API calls to grab results
  }

  render(){
    return (<div>
      {results}
    </div>)
  }

问题是我总是在当前状态之前获得状态，所以搜索动物＆＃34;将导致＆＃34;动物＆＃34;在哪里＆＃39;不见了。

我试图阻止每次用户输入密钥时发送api请求，这就是为什么我检查密钥是否为＆＃34;输入＆＃34;

Answer 1

出现此问题的原因是您在grabSearchResults()函数上调用componentWillUpdate，此时state / props保留前一个值。

您应该使用componentDidUpdate功能。

此外，由于您可能在grabSearchResults功能中设置了状态，因此您必须提供支票，然后才能在grabSearchResults中致电componentDidMount，否则您的应用将会启用在无限循环中

componentDidUpdate(prevProps, prevState){
      if(prevProps.searchValue !== this.props.searchValue) {
          this.grabSearchResults() 
      }
  }

具有异步状态的搜索功能

1 个答案: