[英]Load more implementation in ReactJs
I am trying to implement load more button for my small project GiF generator.我正在尝试为我的小项目 GiF 生成器实现加载更多按钮。 First I thought of appending next set of 20 response at the bottom, but failed to do.首先,我想在底部附加下一组 20 个响应,但没有做到。 Next, I thought of implementing loading the next set of 20 results by simply removing the current one.接下来,我想通过简单地删除当前结果来实现加载下一组 20 个结果。 I tried to trigger a method on click of button, but I failed to do so.我试图在单击按钮时触发一个方法,但我没有这样做。 Its updating the state on second click of load more and then never updating it again.它在第二次单击加载更多时更新 state,然后不再更新它。 Please help me find what I am missing, I have started learning React yesterday itself.请帮我找出我缺少的东西,我昨天已经开始学习 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;
Please, help me find, what I am doing wrong, As I know the moment I will update setQuery useEffect should be called with new input but its not happening.请帮我找出我做错了什么,据我所知,我将更新 setQuery useEffect 的那一刻应该用新的输入来调用,但它没有发生。
Maybe try something like this:也许尝试这样的事情:
// 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');
Basically, have the getGifs
method be a bit more generic and then if loadMore
is called, get the next list of gifs from getGift
and append to existing list of gifs.基本上,让getGifs
方法更通用一点,然后如果调用loadMore
,从getGift
和 append 获取下一个 gif 列表到现有的 gif 列表。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.