设置状态变量没有效果

问题描述

这是我代码的相关部分：

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]);