使用功能组件在 reactjs 中加载更多按钮

Question

大家好，我有以下 ReactJS 代码：

     function SolutionsSection({solutions}) {
         const mainSolutions = solutions.slice(0, 4);
         const restSolutions = solutions.slice(4);
         const [isShown, setShow] = useState(false);
          return (
           <div>
             <SolutionSectionBox
               isShown={isShown}
               mainSolutions={mainSolutions}
               restSolutions={restSolutions}
             />
              {/*below is my button component*/}
             <SolutionsSectionAllServices
               setShow={setShow}
               isShown={isShown}
             />
         </div>
        );
       }

我在后端有 28 个“解决方案”信息。我可以成功获取这些信息并传递给我的“SolutionsSection”组件。

“mainSolutions”显示前 4 个解决方案，“restSolutions”在单击“加载更多”按钮时显示其余 24 个解决方案。使用 useState 我决定显示或隐藏我的 restSolutions。

现在我的问题是，如何按块加载我的解决方案信息数据，我的意思是在开始时我们应该看到前 4 个解决方案，然后单击“加载更多”按钮显示 8 个解决方案信息，然后再次单击按钮显示下一个 12... 我需要这样的东西：code

请帮我解决这个问题，我是 react 新手。

Answer 1

这是最幼稚的做法。

这里是属性和动作处理程序

const solutionsArr = solutions;
const [nextSolutions, setNextSolutions] = useState([solutions.slice(0, 4)]);

const onLoadMore = () => {
  let base = nextSolutions.length;
  let newResultArr = solutionsArr(base, base + 3);

  // appending new result to arr
  setNextSolutions([...nextSolutions, ...newResultArr]);
};

所以对于第一次加载更多，

base -> 4 (length) as starting index and 7 as ending index (4,7)

2nd (8,11)

3rd (12,15)

等等……