>source

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

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

  • 답변 # 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)}
        />
       ...
    }
    
    

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

관련 자료

  • 이전 javascript - jestmock ( 'module')없이 NodeJS에서 Jest로 API 호출을 모의 할 수 있습니까?
  • 다음 python - 홀수 양의 서브 플롯 플로팅