React 子组件在更改后不呈现

Question

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

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

我遇到的问题是，当我触发 Button 事件 handleNext 时，它将成功更新 offset & limit 并将它们传递给 CardList。但是，它不会遍历数组并输出接下来的 5 个项目。相反，它从 CardList 中删除了所有 Cards，我只剩下一个空屏幕。

Scrollbar.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) 替换时，returns 和 []。如果你增加 offset，你想要的是也增加 limit，例如：

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

React 子组件在更改后不呈现

React Child Component Not Rendering After Change

javascript

node.js

reactjs

react-hooks

use-state