时间戳

首页 > 解决方案 > 第二次搜索后搜索结果未更新 - 反应

javascript - 第二次搜索后搜索结果未更新 - 反应

问题描述

我设置了一个搜索栏，搜索后会弹出结果。但是，问题是，如果我不刷新页面并再次搜索，它会将我推送到新搜索，但搜索结果不会随之更新。为什么即使结果没有更新，更新的参数也会显示？

前任。第一个 url 是 search/erl，第二个 url 是 search/Groovy%20Playlist

首次搜索

首次搜索

第二次搜索，查询参数更新，但搜索结果没有

第二次搜索

搜索栏.js

class SearchBar extends Component {
  constructor(props) {
    super(props)
    this.state = {query: '', results: [], isLoading: false}
  }

  componentWillMount() {
     this.resetComponent()
   }

   resetComponent = () => this.setState({ isLoading: false, results: [], query: '' })

   search(query) {
     this.setState({ query });
     axios
       .get(`/api/search?query=${query}`)
       .then(response => {
         this.setState({ results: response.data});
       })
       .catch(error => console.log(error));
   }

   handleFormSubmit = () => {
   console.log('search:', this.state.query);
   this.props.action
   this.props.history.push(`/search/${this.state.query}`)
   this.resetComponent()



 }


  handleInputChange = (query) => {
    this.search(query);
    this.setState({ isLoading: true, query })

    setTimeout(() =>
      this.setState({
        isLoading: false,
      }) , 300)

  }

  handleResultSelect = (e, { result }) => this.setState({ query: result.title}  )

  render () {

    const resultRenderer = ({ title }) => <List content = {title}/>
    return (

      <Form onSubmit={this.handleFormSubmit}>
      <Search
        loading={this.state.isLoading}
        onResultSelect={this.handleResultSelect}
        onSearchChange={(event) => {this.handleInputChange(event.target.value)}}
        showNoResults={false}
        value={this.state.query}
        resultRenderer={resultRenderer}
        results ={this.state.results}
        type={"submit"}
        { ...this.props}  />
      </Form>

    );
  }

}


export default withRouter (SearchBar)

搜索.js

class Search extends Component {
  constructor(props) {
    super(props)
    this.state = {
      results: []
    }
  }

  componentWillMount() {
    const { match: { params } } = this.props;
    axios
      .get(`/api/search?query=${params.query}`)
      .then(response => {
        console.log(response);
        this.setState({ results: response.data });
      })
      .catch(error => console.log(error));
  }


    render() {
         console.log(this.state.results)
      return(

        <div>
          <div className = "heading centered">
            <h1> Search results for: {this.props.match.params.query} </h1>
          </div>
          {this.state.results.map((post) => {
            return(
                <Post key = {post.id} post={post}/>

            )
          })}
        </div>
      );

    }
}

export default Search

标签： javascriptreactjs

解决方案

SearchBars 状态的更新results将传递给 Search 的道具，但您不使用，this.props.results而是使用this.state.results，即使道具发生变化，它也不会更新。当您在内部重新加载搜索的状态时，这第一次有效，componentWillMount但由于未重新安装组件，因此不会再次调用它。因此，搜索始终使用其状态结果，这些结果从未更新。

现在要解决这种混乱，请componentWillMount从 Search 中删除逻辑，因为这实际上正在执行 SearchBar 已经在执行的操作，并添加一个侦听器来componentWillReceiveProps更新 Searches 状态，或者根本不使用 Search 内部的状态，而是获取传入的结果而是作为this.props.results.

  const Search = ({ match, results }) => (
    <div>
      <div className = "heading centered">
        <h1> Search results for: {match.params.query} </h1>
      </div>
      {results.map((post) => 
            <Post key = {post.id} post={post}/>
      )}
   </div>
  );

推荐阅读