javascript - 在 TypeScript 和 React 中推送多个对象而不覆盖其他对象 - 添加到收藏夹列表
问题描述
我正在使用 TypeScipt 和 React 完成一个天气应用程序,我需要包含的最后一个功能是将查询的位置添加到收藏夹列表的能力。这是第二页的“收藏夹”。
使用查询位置时显示的卡片上的按钮将收藏状态设置为 true。
<button className="add-favorite btn" onClick={() => addToFavoritesHandler()}>Add to Favorites</button>
但是,在搜索新位置时,数组会发生突变。即使尝试将新位置添加到您的收藏夹,它也只显示一个位置,没有以前的位置。
如果有收藏的位置,则在此处进行映射。
{favorites.length === 0 ? (
<p> Add locations to favorites! </p>
) : (
favorite &&
arr?.map((location, id) => {
return (
我只是希望能够在按下按钮时将多个位置添加到收藏夹列表中。
此函数处理对数组的推送,并向下钻取到查询位置上的按钮。
const [favorite, setFavorite] = useState(true);
let favorites: WeatherType[] = [];
// Easier readability
let location = weatherData;
// Pushing the favorite location into the favorite array
const addToFavoritesHandler = () => {
setFavorite(true);
if (location && favorite && !favorites.find((o) => o === location)) {
favorites.push(location);
}
return favorites;
};
GitHub 回购 - https://github.com/carbondesign/granular-ai-assignement-weather-app
谢谢你。
解决方案
我快速阅读了存储库中的代码,我注意到favorites
数组没有保存在 auseState
中,我认为这就是问题所在。
这样,该数组将在每次渲染时重新创建。
如果您更改为:
const [favorites, setFavorites] = useState<WeatherType[]>([]);
并且,在addToFavoritesHandler
您更新的函数favorites
中:
setFavorites(favorites)
你应该让它工作。
推荐阅读
- python - 为什么循环不迭代每一行?
- javascript - 外部 JavaScript 函数未定义
- javascript - 为什么无法在 Javascript 中删除浏览器缓存?
- windows - 在我们公司实施新的严格网络安全措施后,我们的 GITBLIT/Jetty 服务已停止工作
- bash - Bash/Shell:如何在不删除被调用者历史记录功能的情况下添加到历史记录
- database - 哪些指标是 mongodb 中的(逻辑/物理)读写?
- python - 由于一行有问题的代码,Python 不会通过 YouTube Live Chat API 读取 Live Chat 消息
- regex - Perl CLI 就地字符串替换/用特殊字符替换多行
- python - 请求给出 404 而不是 200
- python - 在 Python 中使用 lat long time 变量创建 netcdf 文件时出错