如何解决设置状态变量没有效果
这是我代码的相关部分:
const [savedItems,setSavedItems] = useState([]);
const [savedIds,setSavedIds] = useState([]);
useEffect(() => {
let isMounted = true;
if (props.token) {
fetch(url,{
method: 'GET',withCredentials: true,credentials: 'include',headers: {
'Content-Type': 'application/json','Authorization': 'Token ' + props.token,}
})
.then((response) => {
return response.json()
})
.then((json) => {
if (isMounted)
setSavedItems(json)
})
.then(() => {
const idsArray = savedItems.map((item) => item.site_id)
setSavedIds(idsArray)
})
.catch((error) => console.error(error))
.finally(() => isMounted = false);
}
},[]);
在这部分代码中,我从网站获取数据并将其存储在 savedItems
中。数据如下所示:
[{"site_id":"3350","user":234},{"site_id":"857",{"site_id":"295",{"site_id":"674","user":234}]
我可以成功地将获取的数据存储到 savedItems
状态变量中。然后,我只想为每个项目提取值 site_id
并将它们存储到一个数组中。所以我想要一个这样的数组:
[3350,857,295,674]
这就是我试图用这部分代码实现的目标:
const idsArray = savedItems.map((item) => item.site_id)
setSavedIds(idsArray)
但是,如果我稍后尝试呈现 savedIds
状态变量,它似乎始终为空。
解决方法
您无法更新状态并立即使用更新后的值。请参阅:useState set method not reflecting change immediately 了解更多信息。
我建议添加另一个效果来设置 savedIds
:
useEffect(() => {
const idsArray = savedItems.map((item) => item.site_id)
setSavedIds(idsArray)
},[savedItems]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。