Reactjs 在更新和使用功能组件中的状态时出现问题

我面临一个奇怪的问题，我有一个简单的功能组件，它只呈现一个列表，并跟踪unstar数据的星

这是我的密码：

const TempComponent = () => {
   const [starredItem, setStarredItem] = useState(0);
   const listItems = [
     { 
        id: 1,
        name: "Test User"
     },
     {
       id: 2,
       name: "Test User 2"
     }
   ];
   const handleStar = (id) => {
      // it always shows initial value which is undefined, irrespective of the number of clicks
      console.log(starredItem);
      if(id === starredItem) {
        setStarredItem(0)
      } else {
        setStarredItem(id)
      }
      
   }
   // this updates properly
   console.log(starredItem)
   return <>
       <table>
         <thead>
            <tr>
              <td>ID</td>
              <td>Name</td>
              <td>Action</td>
            </tr>
         </thead>
         <tbody>
          {
             listItems.map(item => 
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.name}</td>
                <td><button onClick={() => handleStar(item.id)}> { 
                      // this is always the initial value, even after updating
                      starredItem === item.id ? "Unstar" : "Star" 
                    } </button></td>
              </tr>
             )
          }
         </tbody>
       </table>
    </>
}

const TempComponent=（）=>{
常量[starredItem，setStarredItem]=useState（0）；
常量列表项=[
{ 
id:1，
名称：“测试用户”
},
{
id:2，
名称：“测试用户2”
}
];
const handleStar=（id）=>{
//它始终显示未定义的初始值，与单击次数无关
控制台日志（starredItem）；
如果（id==starredItem）{
setStarredItem（0）
}否则{
setStarredItem（id）
}
}
//这将正确更新
console.log（starredItem）
返回
身份证件
名称
行动
{
listItems.map（项目=>
{item.id}
{item.name}
handleStar（item.id）}>{
//这始终是初始值，即使在更新之后也是如此
starredItem===item.id？“取消启动”：“启动”
} 
)
}
}

这里，

starredItem

的值在回调函数中总是未定义的。

---

我的实际组件很大，但这是导致问题的部分。这种行为是故意的，还是我遗漏了什么？

Hmmm，也许可以尝试将您的回调包装在useCallback挂钩中，并将starredItem作为依赖项？（）我不确定这是否会有帮助，但这是我要尝试的第一件事。我可以看到starredItem的初始值为零，在handler中，它将始终显示“previous”状态，因为您首先登录到console，然后设置状态。我复制了您的代码并将其粘贴到codesandbox中，它看起来像是在工作。它不适用于我的设置。这和我用的代码是一样的。