javascript - 我如何在没有 redux 的情况下获得当前状态？

Question

我将 redux 与 react 一起使用，但我将 redux 保存为主应用程序状态，并使用 react hooks 处理组件之间的非共享状态。

例如，我有一个导航栏菜单项，每个项目的颜色一旦被点击都应该变成蓝色，所以我想到useState来更改被点击的项目并向它添加一个类.active。

我面临的问题是我没有得到最新的状态，但我得到了以前的状态，我知道在反应中设置状态是异步和批处理的。

演示代码：

零件

 const [targets, getTarget] = useState([]);
 const addTarget = (e) => {
   getTarget([e.target]);
 }

 const handleOnItemClick = (e, category) => {
    addTarget(e);
    console.log(targets) // return [] on first click
 } 

myFunctionToAddAcTiveClass () {
  //i need to use state here but i could not
 // because it does not return the latest state
}

return(
 <ul className="categories-list-items d-flex justify-content-between mb-4">
      {items.map((item, index) => {
         return (
            <li
               key={index}
               onClick={(e) => handleOnItemClick(e, category)}
            >
             {item}
           </li>
         );
     })}
 </ul>
)

有没有办法在每次点击时获得正确的项目以添加.active类？

标签： javascriptreactjsredux