1

我的应用程序有一个 onClick 应该呈现更多的 gif。但是，它执行一次然后停止。此外，onClick 会删除页面上已经存在的所有 gif。有人知道我在做什么错吗？

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

  componentDidMount() {
    this.searchGifs('kittens');
  }

  searchGifs = (searchQuery) => {
    fetch(`http://api.giphy.com/v1/gifs/search?q=${searchQuery}&limit=12&api_key=dc6zaTOxFJmzC`).then(data => data.json())
      .then(response => {
        this.setState({
          results: response.data,
        });
     });
  }



  searchMoreGifs = (offsetQuery) => {
    fetch(`http://api.giphy.com/v1/gifs/search?q=${offsetQuery}&limit=12&offset=${this.state.results.length}&api_key=dc6zaTOxFJmzC`).then(data => data.json())
      .then(response => {
        this.setState({
          results: response.data,
        });
     });
  }


  render() {
    return (
      <main className="app">
        <Header />
        <SearchForm startSearch={this.searchGifs} />
        <ResultList gifs={this.state.results} />
        <LoadMore gifs={this.state.results} searchMore={this.searchMoreGifs} />
      </main>
    );
  }
}

这是onClick：

   class LoadMore extends React.Component {
    render(props) {
        return(
            <button onClick={this.props.searchMore}>Load More</button>
        );
    }
}


export default LoadMore;
4

1 回答 1

1

每次调用时，this.setState({results: something})您都会完全覆盖先前的结果状态。您希望获取其中的数组this.state.results并将其与新结果连接。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      results: [],
      // I also suggest moving the searchQuery to the state so it can be used in both the offset and the original search
      searchQuery: 'kittens'
    };
  }

  componentDidMount() {
    this.searchGifs(this.state.searchQuery);
  }

  searchGifs = (searchQuery) => {
    fetch(`http://api.giphy.com/v1/gifs/search?q=${searchQuery}&limit=12&api_key=dc6zaTOxFJmzC`).then(data => data.json())
      .then(response => {
        this.setState({
          results: response.data,
        });
      });
  }



  searchMoreGifs = (offsetQuery) => {
    fetch(`http://api.giphy.com/v1/gifs/search?q=${offsetQuery}&limit=12&offset=${this.state.results.length}&api_key=dc6zaTOxFJmzC`).then(data => data.json())
      .then(response => {
        this.setState({
          // You were overwriting the old results with new data every time you ran this function
          results: this.state.results.concat(response.data),
        });
      });
  }


  render() {
    return (
      <main className="app">
        <Header />
        <SearchForm startSearch={this.searchGifs} />
        <ResultList gifs={this.state.results} />
        {/* You also need to pass the offsetQuery to the LoadMore component so that the searchMore function can use it*/}
        <LoadMore searchMore={this.searchMoreGifs} offsetQuery={this.state.searchQuery} />
      </main>
    );
  }
}

class LoadMore extends React.Component {
  render(props) {
    const {offsetQuery, searchMore} = this.props
    return (
      <button onClick={() => searchMore(offsetQuery)}>Load More</button>
    );
  }
}


export default LoadMore;
于 2017-06-28T22:54:00.887 回答