设置状态变量无效

Question

这是我代码的相关部分：

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","user":234},
{"site_id":"295","user":234},
{"site_id":"674","user":234}]

我可以成功地将获取的数据存储到 savedItems 状态变量中。然后，我只想提取每个项目的值 site_id 并将它们存储到一个数组中。所以我想要一个这样的数组：

[3350,857,295,674]

这就是我试图用这部分代码实现的目标：

const idsArray = savedItems.map((item) => item.site_id)
setSavedIds(idsArray)

但是，如果我稍后尝试渲染 savedIds 状态变量，它似乎总是空的。

Answer 1

您无法更新状态并立即使用更新后的值。参考：了解更多信息。

我建议添加另一个效果来设置 savedIds:

useEffect(() => {
  const idsArray = savedItems.map((item) => item.site_id)
  setSavedIds(idsArray) 
}, [savedItems]);

设置状态变量无效

Setting a state variable has no effect

reactjs

react-hooks

react-state

use-state