Javascript React.js：如何创建loadMore特性onClick？

我正在尝试使用

loadMore

按钮实现一个小应用程序。
默认情况下，它应该输出3个数据，并在用户每次单击“加载更多”按钮时再显示3个数据
尝试多种方法，我想出了由建议的解决方案。
这是你的电话号码

App.js

  let arrayForHoldingStories = [];
  const [topStoryIds] = useStories();
  const [storiesToShow, setStoriesToShow] = useState([]);
  const [next, setNext] = useState(3);

  const loopWithSlice = (start, end) => {
    const slicedStories = topStoryIds.slice(start, end);
    arrayForHoldingStories = [...arrayForHoldingStories, ...slicedStories];
    setStoriesToShow([...arrayForHoldingStories, ...slicedStories]);
  };

  useEffect(() => {
    loopWithSlice(0, storiesPerPage);
  }, [topStoryIds]);

  const handleShowMorePosts = () => {
    let loadedMore = next + storiesPerPage;
    loopWithSlice(next, loadedMore);
    setNext(next + storiesPerPage);
  };

但问题是，合并初始数组和新数组时，它们具有相同的元素，这会引发错误

Warning: Encountered two children with the same key, `26991887`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

在合并之前，我试图通过

forEach

或

set

函数从两个数组中删除重复项，但都不起作用。 我的尝试

---

如有任何帮助，我们将不胜感激。

根据您的描述，您不需要为具有slice函数的循环设置结束或开始参数。您可以使用

storiesToShow

状态的长度

import React, { useState, useEffect } from "react";

import Stories from "./Stories";
import useStories from "./hooks/useStories";

function App() {
  const storiesPerPage = 3;
  let arrayForHoldingStories = [];
  const [topStoryIds] = useStories();
  const [storiesToShow, setStoriesToShow] = useState([]);
  const [next, setNext] = useState(3);

  const loopWithSlice = () => {
    const toShow = topStoryIds.slice(
      storiesToShow.length,
      storiesToShow.length + storiesPerPage
    );
    setStoriesToShow([...storiesToShow, ...toShow]);
  };

  useEffect(() => {
    if (topStoryIds) {
      loopWithSlice();
    }
  }, [topStoryIds]);

  const handleShowMorePosts = () => {
    let loadedMore = next + storiesPerPage;
    loopWithSlice(next, loadedMore);
    setNext(next + storiesPerPage);
  };

  console.log("next", next);
  console.log("storiesPerPage", storiesPerPage);
  console.log("loopWithSlice", loopWithSlice);
  console.log("arrayForHoldingStories", arrayForHoldingStories);
  console.log("storiesToShow", storiesToShow);

  return (
    <>
      <div>
        {storiesToShow.length > 0 &&
          storiesToShow.map((storyId) => (
            <Stories storyId={storyId} key={storyId} />
          ))}
      </div>
      <button onClick={handleShowMorePosts}>load more</button>
    </>
  );
}

export default App;

import React，{useState，useffect}来自“React”；
从“/Stories”导入故事；
从“/hooks/useStories”导入useStories；
函数App（）{
const storiesPerPage=3；
设arrayForHoldingStories=[]；
const[toptoryids]=useStories（）；
const[storiesthow，setstoriesthow]=useState（[]）；
const[next，setNext]=useState（3）；
常量loopWithSlice=（）=>{
const toShow=toptoryids.slice(
故事的长度，
storiesToShow.length+storiesPerPage
);
setStoriesToShow（[…storiesToShow，…toShow]）；
};
useffect（（）=>{
if（上扭体）{
loopWithSlice（）；
}
}，[topStoryIds]）；
const handleShowMorePosts=（）=>{
让loademore=next+storiesPerPage；
loopWithSlice（下一步，loadedMore）；
设置下一页（下一页+每页的故事）；
};
console.log（“下一步”，下一步）；
日志（“storiesPerPage”，storiesPerPage）；
日志（“loopWithSlice”，loopWithSlice）；
log（“arrayForHoldingStories”，arrayForHoldingStories）；
console.log（“storiesthow”，storiesthow）；
返回(
{storiesthow.length>0&&
storiesToShow.map（（故事ID）=>(
))}
加载更多
);
}
导出默认应用程序；

---

您可以查看完整的代码。

Hi@Josh，非常感谢。这很有道理。嗨，乔希，再次感谢你的回答。请你再回答一个问题好吗？尽管您的解决方案工作正常，这是一件小事，但我想理解并解决useEffect警告，它说：React Hook useEffect缺少依赖项：“loopWithSlice”。包括它或删除依赖项数组。（反应钩/详尽的deps）eslint" . 如果删除依赖项数组，应用程序将崩溃。消除此警告的最佳解决方案是什么？谢谢你advnace@Greg这是由于在初始渲染时调用

loopWithSlice

，这会为

useffect

创建一种订阅模式。另外，

loopWithSlice

函数可以在渲染之间更改，因此此规则确保函数在发生更改时包含在deps数组中。我修改了沙盒以显示更好的方式，而无需在初始渲染时调用

loopWithSlice

。嗨@Josh，再次感谢您的帮助。我得到了它。

import React, { useState, useEffect } from "react";

import Stories from "./Stories";
import useStories from "./hooks/useStories";

function App() {
  const storiesPerPage = 3;
  let arrayForHoldingStories = [];
  const [topStoryIds] = useStories();
  const [storiesToShow, setStoriesToShow] = useState([]);
  const [next, setNext] = useState(3);

  const loopWithSlice = () => {
    const toShow = topStoryIds.slice(
      storiesToShow.length,
      storiesToShow.length + storiesPerPage
    );
    setStoriesToShow([...storiesToShow, ...toShow]);
  };

  useEffect(() => {
    if (topStoryIds) {
      loopWithSlice();
    }
  }, [topStoryIds]);

  const handleShowMorePosts = () => {
    let loadedMore = next + storiesPerPage;
    loopWithSlice(next, loadedMore);
    setNext(next + storiesPerPage);
  };

  console.log("next", next);
  console.log("storiesPerPage", storiesPerPage);
  console.log("loopWithSlice", loopWithSlice);
  console.log("arrayForHoldingStories", arrayForHoldingStories);
  console.log("storiesToShow", storiesToShow);

  return (
    <>
      <div>
        {storiesToShow.length > 0 &&
          storiesToShow.map((storyId) => (
            <Stories storyId={storyId} key={storyId} />
          ))}
      </div>
      <button onClick={handleShowMorePosts}>load more</button>
    </>
  );
}

export default App;