reactjs - react : How to update fetch with new query

Question

我试图更改查询，以便我获取的内容会更新，但它只会更新我放在那里进行测试的内容。我真的很感激帮助。使用这个类方法还是使用钩子(Hook)学习更好？自从我在谷歌上搜索时，我找到了一些解决方案，但它使用的是钩子(Hook)。

    class App extends Component {
  constructor() {
    super();
    this.state = {
      search: '',
      photos: [],
      query: 'space'
    }
    this.handleClick = this.handleClick.bind(this)
  }
  async componentDidMount() {
    
    const {query} = this.state
  try{
    const responseSearch = await client.photos.search({query, per_page: 20 });
    const dataSearch = await responseSearch.photos;
    console.log(responseSearch)
    this.setState({photos: dataSearch})
    if (responseSearch.ok) {
      throw Error(responseSearch.statusText);
    }
  }catch (error) {
    console.log(error);
  }
  }
  handleClick(){
    this.setState({query: 'nature'})
  }
 

render() {
  const {photos, search, query} = this.state;
  const filteredImages = photos.filter( card =>
     card.photographer.toLowerCase().includes(search.toLowerCase() )
  ) 
  
      return (
      <div className="App">
      <Particles className ='particles'
       params={particlesOptions}
       />
       <h2>{query}</h2>
       <button onClick={this.handleClick}>change</button>
       <Nav 
       categories={categories} 
       />
      <SearchBox  
          placeholder='search cards'
          handleChange={e => this.setState({query: e.target.value})}
        />
        <CardGroup cards={filteredImages} />
      </div>
     );  
}
}

Answer 1

您可以使用另一种名为 componentDidUpdate 的生命周期方法。每当 props 时都会被调用或 state已更改(请注意，在呈现组件时最初不会调用它，因此您仍然必须使用 componentDidMount )。
然后你可以在一个单独的方法中转移你的 API 调用(我们称之为 fetchData)并在 componentDidMount 中重用它以及 componentDidUpdate所以你的代码看起来像下面这样:

fetchData = async () => {
  try {
    const responseSearch = await client.photos.search({ query, per_page: 20 });
    const dataSearch = await responseSearch.photos;
    console.log(responseSearch)
    this.setState({ photos: dataSearch })
    if (responseSearch.ok) {
      throw Error(responseSearch.statusText);
    }
  } catch (error) {
    console.log(error);
  }
}

componentDidMount() {
  this.fetchData();
}

componentDidUpdate(prevProps, prevState) {
  // have a condition to avoid infinite fetchData calls
  if (prevState.query !== this.state.query) {
    this.fetchData();
  }
}