javascript - 更改后反应子组件不渲染
问题描述
我是 React 新手,正在尝试创建自己的滚动条。我正在使用本地 JSON API 来模拟获取数据,然后将数据列为“卡片”。我构建了几个其他组件来组织和处理信息,它看起来像这样:
Scrollbar (Buttons to Navigate)
|-->CardList (Handles iterating over the cards)
|-->Cards (Template for displaying an individual card)
我遇到的问题是,当我触发Button事件handleNext时,它将成功更新偏移量和限制并将它们传递给CardList。但是,它不会重复数组并输出接下来的 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;
解决方案
问题是当handleNext
被触发时offset
将等于5
同时limit
保持5
太的值,那么当你做slice(offset,limit)
将被替换为slice(5,5)
返回时[]
。limit
如果您增加 ,您也想要增加offset
,例如:
const handleNext = () => {
setOffset(offset + limit);
setLimit(limit + limit)
}
推荐阅读
- php - 如何使用 Dompdf 获取多个页面
- javascript - 为什么我的自定义过滤器不能以角度工作,而且文本也没有出现?
- c# - 在高负载下使用 Serilog 定期批处理接收器建立内存
- html - 在css中为按钮着色
- java - /api/jsonws 提供的 Liferay JSON Web 服务对任何用户开放访问
- python - 文件从 python.exe 运行
- c# - sqlite 异常已被调用的目标抛出
- angular - 为什么我的测验应用程序中的问题之间的导航不起作用?
- google-chrome-extension - chrome.bookmarks.onChildrenReordered 何时被解雇?
- java - Maven 无法创建本地存储库