Question

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

例如第一个网址是search / erl，第二个网址是search / Groovy％20Playlist

首次搜索

第二次搜索，查询参数已更新，但搜索结果未

Searchbar.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)

Search.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

Answer 1

更新results的SearchBars状态将传递给Search的道具，但是您不使用this.props.results而是使用this.state.results，即使道具改变。当您在componentWillMount中重新加载Search的状态时，该方法第一次起作用，但是由于未重新安装该组件，因此不会再次调用它。因此，搜索始终使用其状态结果，但永远不会更新。

现在要解决此混乱情况，请从Search中删除componentWillMount逻辑，因为它实际上正在执行SearchBar已经完成的工作，然后向componentWillReceiveProps添加一个侦听器以更新Searches状态，或者不起作用处于搜索状态，但将传入的结果取为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>
  );

第二次搜索后搜索结果未更新-REACT

1 个答案: