홈>2020-11-30 07:53source

reactjs - react - 새 쿼리로 가져 오기를 업데이트하는 방법

내가 가져 오는 내용이 업데이트되도록 쿼리를 변경하려고했지만 테스트를 위해 거기에 넣은 업데이트 만 있습니다. 정말 도움을 주시면 감사하겠습니다. 그리고이 클래스 메서드를 사용하거나 후크를 사용하여 배우는 것이 더 낫습니까? 인터넷 검색을 할 때부터 해결책을 찾았지만 후크를 사용했습니다.

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

reactjsfetch

답변 # 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();
  }
}

답변 # 2

수명주기 메서드에 넣으면 가져 오기가 업데이트되지 않습니다. componentDidMount . 가져 오기를 렌더에 넣는 것은 좋지 않습니다. 나중에 가져 오기 메서드를 트리거하는 것이 좋습니다. setState 수행.

handleClick(){
   this.setState({query: 'nature'},this.fetchAgain)
}
fetchAgain(){
   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);
       }
}

답변 # 3

데이터를 가져 오는 방법을 만들 것입니다. fetchData , 그런 다음 해당 메서드를 componentDidMount 쿼리 변경 및 호출을 처리하는 다른 메서드를 만들 것입니다. fetchData 상태 업데이트 후

componentDidMount() {
    this.fetchData();
}
fetchData = () => {
      ... //fetch code
}
changeQuery = (query) => { 
    this.setState({query : query} , this.fetchData);
}
render() { 
   ...
   <SearchBox  
      placeholder='search cards'
      handleChange={e => this.changeQuery(e.target.value)}
    />
   ...
}

가져 오는 동안 입력을 비활성화하고 싶습니다.

Python2.net

reactjs - react - 새 쿼리로 가져 오기를 업데이트하는 방법

관련 자료