更改后反應子組件不渲染

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)
}