更改后反应子组件不渲染

Question

我是 React 新手，正在尝试创建自己的滚动条。 我正在使用本地 JSON API 来模拟获取数据，然后将数据列为“卡片”。 我构建了几个其他组件来组织和处理信息，它看起来像这样：

Scrollbar (Buttons to Navigate)
 |-->CardList (Handles iterating over the cards)
        |-->Cards (Template for displaying an individual card) 

我遇到的问题是，当我触发Button事件handleNext时，它将成功更新偏移量和限制并将它们传递给CardList 。 但是，它没有重复数组和 output 下 5 项。 相反，它从CardList中删除了所有卡片，我只剩下一个空屏幕。

滚动条.js：

    const { data isPending, error} = useFetch ('http://localhost:8000/data');
    const [limit, setLimit] = useState(5);
    const [offset, setOffset] = useState(0);


    const handleNext = () => {
      setOffset(offset + limit);

      console.log("Offset: " +offset);
    }

    return (  
        <div className="scrollbar">
                {error && <div>{error}</div>}
                {isPending && <div>Loading...</div>}
                {data && <CardList data={data} offset={offset} limit={limit}/> }
                
                <Button onClick={handleNext}/>
         </div>
   );
}
 
export default Scrollbar;

CardList.js：

const CardList = ({data , offset, limit}) => {

    return ( 

        <div className="card-list" >
            {data.slice(offset,limit).map((data) => (
                <Card data={data} key={data.id}/> 
            ))}
    </div>
     );
}
 
export default CardList;

Answer 1

问题是当handleNext被触发时offset将等于5而limit也保持5的值，然后当你做slice(offset,limit)将被slice(5,5)替换，返回一个[] . 如果您增加offset ，您想要的也是增加limit ，例如：

const handleNext = () => {
  setOffset(offset + limit);
  setLimit(limit + limit)
}