在功能组件中更新和使用状态时遇到问题

Question

我面临一个奇怪的问题，我有一个简单的功能组件，该组件仅呈现列表并跟踪未星级数据的星级。

这是我的代码：

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>
    </>
}

在此，starredItem的值在回调函数中始终未定义。 我的实际组件很大，但这是导致问题的部分。这种行为是故意的，还是我缺少了什么？