Загрузить больше реализации в ReactJs - PullRequest
0 голосов
/ 20 апреля 2020

Я пытаюсь реализовать кнопку загрузки больше для моего небольшого проекта GiF генератора. Сначала я подумал добавить следующий набор из 20 ответов внизу, но не смог. Затем я подумал о реализации загрузки следующего набора из 20 результатов, просто удалив текущий. Я пытался вызвать метод по нажатию кнопки, но мне не удалось это сделать. Он обновляет состояние при втором щелчке загрузки больше, а затем никогда не обновляет его снова. Пожалуйста, помогите мне найти то, что мне не хватает, я вчера начал изучать React.

import React, { useEffect, useState } from 'react';
import './App.css';
import Gif from './Gif/Gif';

const App = () => {
  const API_KEY = 'LIVDSRZULELA';

  const [gifs, setGif] = useState([]);
  const [search, setSearch] = useState('');
  const [query, setQuery] = useState('random');
  const [limit, setLimit] = useState(20);
  const [pos, setPos] = useState(1);

  useEffect(() => {
    getGif();
  }, [query])

  const getGif = async () => {
    const response = await fetch(`https://api.tenor.com/v1/search?q=${query}&key=${API_KEY}&limit=${limit}&pos=${pos}`);
    const data = await response.json();
    setGif(data.results);
    console.log(data.results)
  }

  const updateSearch = e => {
    setSearch(e.target.value);
  }

  const getSearch = e => {
    e.preventDefault();
    setQuery(search);
    setSearch('');
  }

  const reload = () => {
    setQuery('random')
  }

  const loadMore = () => { // this is where I want my Pos to update with 21 on first click 41 on second and so on
    let temp = limit + 1 + pos;
    setPos(temp);
    setQuery(query);
  }

  return (
    <div className="App">
      <header className="header">
        <h1 className="title" onClick={reload}>React GiF Finder</h1>
        <form onSubmit={getSearch} className="search-from">
          <input className="search-bar" type="text" value={search}
            onChange={updateSearch} placeholder="type here..." />
          <button className="search-button" type="submit">Search</button>
        </form>
        <p>showing results for <span>{query}</span></p>
      </header>
      <div className="gif">
        {gifs.map(gif => (
          <Gif
            img={gif.media[0].tinygif.url}
            key={gif.id}
          />
        ))}
      </div>
      <button className="load-button" onClick={loadMore}>Load more</button>
    </div>
  );
}

export default App;

Пожалуйста, помогите мне найти, что я делаю не так, как я знаю, когда я обновлю setQuery useEffect должно быть вызывается с новым вводом, но его не происходит.

1 Ответ

1 голос
/ 20 апреля 2020

Возможно, попробуйте что-то вроде этого:


  // Fetch gifs initially and then any time
  // the search changes.
  useEffect(() => {
    getGif().then(all => setGifs(all);
  }, [query])

  // If called without a position index, always load the
  // initial list of items.
  const getGif = async (position = 1) => {
    const response = await fetch(`https://api.tenor.com/v1/search?q=${query}&key=${API_KEY}&limit=${limit}&pos=${position}`);
    const data = await response.json();
    return data.results;
  }


  // Append new gifs to existing list
  const loadMore = () => {
    let position = limit + 1 + pos;
    setPos(position);
    getGif(position).then(more => setGifs([...gifs, ...more]);
  }

  const getSearch = e => {
    e.preventDefault();
    setQuery(search);
    setSearch('');
  }

  const updateSearch = e => setSearch(e.target.value);

  const reload = () => setQuery('random');

По сути, метод getGifs должен быть немного более обобщенным c, а затем, если вызывается loadMore, получить следующий список картинок из getGift и добавить в существующий список картинок.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...