设置状态变量没有效果[重复]答案

【问题标题】：Setting a state variable has no effect [duplicate]设置状态变量没有效果[重复]
【发布时间】：2021-08-20 23:43:17
【问题描述】：

这是我的代码的相关部分：

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 状态变量，它似乎总是为空。

【问题讨论】：

标签： reactjs react-hooks use-state react-state

【解决方案1】：

您无法更新状态并立即使用更新后的值。更多信息请参考：useState set method not reflecting change immediately。

我建议添加另一个设置savedIds的效果：

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

【讨论】：