Javascript 如何在React应用程序中同步数据？呈现的数据没有'；t与函数调用中访问的数据不匹配

我正在制作一个React应用程序，它从API请求数据并将结果呈现为卡片。我遇到的问题是，我在每张卡上都添加了一个“最喜欢的”星形图标，单击该图标时，该图标将变为高亮显示的金色，再单击一次，该图标将变为灰色。这是由存储在本地组件的React钩子中的布尔值控制的。颜色更改可以正常工作，但是当我想访问布尔状态变量以继续其余操作时，我一直访问的本地状态值似乎是“previous”状态。我想不出怎么解决这个问题

阅读文档使我认为我正在访问过时的状态数据或过时的闭包。我仍然无法解决这个问题，所以我希望能得到一些帮助，以下是我所拥有的

import React，{useState}来自“React”
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}
从“@fortawesome/free solid svg icons”导入{faStar}
导出常量卡=（{item，addOn，onDelete}）=>{
//标记是否单击星号
const[favored，setFavored]=使用状态（false）；
//更新收藏夹组件
const updateFavorites=（项）=>{
//在这里，最惠国被切换
setFavored（！favored）；
//进一步尝试访问首选项会导致访问错误的首选项
如果（优惠）{
log（`preferred的值是：${preferred}，开始应该是gold`）；
}否则{
log（`preferred的值为：${preferred}，星号应为灰色`）；
}
}
返回(
updateFavorites（项目）}
/>
{item.name}
{item.description}
)
}

编辑：我通过以下操作解决了我的问题：

const updateFavorites = (item) => {
        //here thet favored state is toggled
        setFavored(favored => {
            favored = !favored;
            if(favored){
                console.log('adding a favorite');
                addOn(item);
            }else{
                console.log('removing a favorite');
                onDelete(item);
            };
            return favored;
        }); 
    }

---

但是，根据答案，我使用useEffect替换了它。

事实是，状态值由基于当前闭包的函数使用，状态更新将反映在下一次重新呈现中，现有闭包不受影响，但会创建新的闭包。现在，在当前状态下，这些值由现有闭包获得，当重新呈现时，闭包将根据是否重新创建函数进行更新

您可以使用以下解决方案

useEffect(() => {
    if (favored) {
      console.log(`value of favored is: ${favored}, the start should be gold`);
    } else {
      console.log(`value of favored is: ${favored}, the star should be grey`);
    }
  }, [favored,item]);

---

事实上，状态值是由函数基于其当前闭包使用的，状态更新将反映在下一次重新呈现中，其中现有闭包不受影响，但会创建新的闭包。现在，在当前状态下，这些值由现有闭包获得，当重新呈现时，闭包将根据是否重新创建函数进行更新

您可以使用以下解决方案

useEffect(() => {
    if (favored) {
      console.log(`value of favored is: ${favored}, the start should be gold`);
    } else {
      console.log(`value of favored is: ${favored}, the star should be grey`);
    }
  }, [favored,item]);

您应该将逻辑从事件处理程序导入并移动到useEffect挂钩：

import React，{useState，useffect}来自“React”
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}
从“@fortawesome/free solid svg icons”导入{faStar}
导出常量卡=（{item，addOn，onDelete}）=>{
const[favored，setFavored]=使用状态（false）；
常量updateFavorites=（）=>{
setFavored（！favored）；
}
//将所需逻辑移到此处，并将“偏好”和“项目”添加到依赖项数组中：
useffect（（）=>{
如果（优惠）{
log（`preferred的值是：${preferred}，开始应该是gold`）；
}否则{
log（`preferred的值为：${preferred}，星号应为灰色`）；
}
}，[优惠，项目]）
返回(
updateFavorites（）}
/>
{item.name}
{item.description}
)
}

您应该将逻辑从事件处理程序导入并移动到useEffect挂钩：

import React，{useState，useffect}来自“React”
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}
从“@fortawesome/free solid svg icons”导入{faStar}
导出常量卡=（{item，addOn，onDelete}）=>{
const[favored，setFavored]=使用状态（false）；
常量updateFavorites=（）=>{
setFavored（！favored）；
}
//将所需逻辑移到此处，并将“偏好”和“项目”添加到依赖项数组中：
useffect（（）=>{
如果（优惠）{
log（`preferred的值是：${preferred}，开始应该是gold`）；
}否则{
log（`preferred的值为：${preferred}，星号应为灰色`）；
}
}，[优惠，项目]）
返回(
updateFavorites（）}
/>
{item.name}
{item.description}
)
}