Javascript 为什么useState值为'；t更新内部使用热键回调？

我得到了以下带有React hooks的搜索建议，它使用

React热键hooks

来管理按键

为什么

selectedUserItem

不按Enter键更新？当上下键更改时，它保持为0

import { useHotkeys } from "react-hotkeys-hook";
import React, { useState } from "react";

import "./styles.css";
const itemsByName = [
  {
    id: 1,
    name: "Ice Cream"
  },
  {
    id: 2,
    name: "Banana Pudding"
  },
  {
    id: 3,
    name: "Chocolate Cake"
  },
  {
    id: 4,
    name: "Sponge Cake"
  },
  {
    id: 5,
    name: "Carrot Cake"
  }
];

const App = () => {
  const [selectedUserItem, setSelectedUserItem] = useState(0);

  // const [create] = useMutation(SAVE_USER_ITEM, {
  //   refetchQueries: ["UserItemsQuery"]
  // })

  const itemSelect = (e, item) => {
    e.preventDefault();
    // create({ variables: { input: { id: item.id } } });
    // console.log(item)
  };

  const increment = selectedUserItem => {
    const max = itemsByName.length - 1;
    return max > selectedUserItem ? selectedUserItem + 1 : max;
  };

  const decrement = selectedUserItem => {
    const min = 0;
    return min < selectedUserItem ? selectedUserItem - 1 : min;
  };

  useHotkeys(
    "*",
    (event, handler) => {
      // console.log(handler)
      switch (event.key) {
        case "ArrowDown":
          setSelectedUserItem(selectedUserItem => increment(selectedUserItem));
          break;
        case "ArrowUp":
          setSelectedUserItem(selectedUserItem => decrement(selectedUserItem));
          break;
        case "Enter":
          console.log(selectedUserItem);
          const userItem = itemsByName[selectedUserItem];
          console.log(userItem);
          break;
        default:
          console.log(event.key);
          break;
      }
    },
    {
      filter: () => true
    }
  );

  return (
    <div className="absolute w-3/4 mt-16 ml-8 py-2 bg-white shadow-xl rounded-lg">
      <h1>Index: {selectedUserItem}</h1>
      {itemsByName.map((item, i) => {
        return (
          <div
            href="#"
            onClick={e => itemSelect(e, item)}
            className={`${selectedUserItem === i ? "hovered" : ""} dessert`}
            key={item.id}
          >
            {item.id}: {item.name}
          </div>
        );
      })}
    </div>
  );
};

export default App;

从“react hotkeys hook”导入{useHotkeys}；
从“React”导入React，{useState}；
导入“/styles.css”；
const itemsByName=[
{
id:1，
名称：“冰淇淋”
},
{
id:2，
名称：“香蕉布丁”
},
{
id:3，
名称：“巧克力蛋糕”
},
{
id:4，
名称：“海绵蛋糕”
},
{
id:5，
名称：“胡萝卜蛋糕”
}
];
常量应用=（）=>{
const[selectedUserItem，setSelectedUserItem]=useState（0）；
//const[create]=使用变异（保存用户项{
//refetchQueries:[“UserItemsQuery”]
// })
const itemSelect=（e，item）=>{
e、 预防默认值（）；
//创建（{variables:{input:{id:item.id}}}）；
//console.log（项目）
};
const increment=selectedUserItem=>{
const max=itemsByName.length-1；
返回max>selectedUserItem？selectedUserItem+1:max；
};
常量减量=selectedUserItem=>{
常数min=0；
返回min{
//日志（处理程序）
开关（事件键）{
案例“箭头向下”：
设置selectedUserItem（selectedUserItem=>increment（selectedUserItem））；
打破
案例“ArrowUp”：
设置selectedUserItem（selectedUserItem=>减量（selectedUserItem））；
打破
案例“输入”：
console.log（selectedUserItem）；
const userItem=itemsByName[selectedUserItem]；
console.log（userItem）；
打破
违约：
console.log（event.key）；
打破
}
},
{
过滤器：（）=>true
}
);
返回(
索引：{selectedUserItem}
{itemsByName.map（（item，i）=>{
返回(
itemSelect（e，item）}
className={`${selectedUserItem===i？“悬停”：“}
key={item.id}
>
{item.id}:{item.name}
);
})}
);
};
导出默认应用程序；

useHotkeys

内部使用

useCallback

和

useffect

钩子，它们需要知道其某些依赖项何时更改。以确保它能与这些钩子一起很好地工作，就像前面提到的其他钩子一样，作为它的最后一个参数

deps:any[]=[]

：追加到回调的备忘录中的依赖项数组。这里定义回调的内部依赖项。例如，如果回调操作依赖于引用不稳定的值或随时间变化的值，则应将此值添加到

deps

数组中。由于回调在大多数情况下都不依赖于任何不稳定的回调或随时间变化的值，因此可以不使用此值，因为默认情况下它将设置为空数组

在您的代码中，它如下所示：

// These never changes and do not rely on the component scope, so they
// can be defined safely outside the component.
const increment = selectedUserItem => {
  const max = itemsByName.length - 1;
  return max > selectedUserItem ? selectedUserItem + 1 : max;
};

const decrement = selectedUserItem => {
  const min = 0;
  return min < selectedUserItem ? selectedUserItem - 1 : min;
};

const App = () => {
  const [selectedUserItem, setSelectedUserItem] = useState(0);

  useHotkeys(
    "*",
    (event, handler) => {
      switch (event.key) {
        case "ArrowDown":
          setSelectedUserItem(increment);
          break;
        case "ArrowUp":
          setSelectedUserItem(decrement);
          break;
        case "Enter":
          console.log(selectedUserItem, itemsByName[selectedUserItem]);
          break;
        default:
          console.log(event.key);
          break;
      }
    },
    {
      filter: () => true
    },
    // The dependencies array which ensure that the data is up to date in the callback.
    [selectedUserItem, setSelectedUserItem]
  );

  // rest of the component

//它们从不更改，也不依赖于组件范围，因此
//可以在组件外部安全地定义。
const increment=selectedUserItem=>{
const max=itemsByName.length-1；
返回max>selectedUserItem？selectedUserItem+1:max；
};
常量减量=selectedUserItem=>{
常数min=0；
返回min{
const[selectedUserItem，setSelectedUserItem]=useState（0）；
使用热键(
"*",
（事件、处理程序）=>{
开关（事件键）{
案例“箭头向下”：
设置可选项目（增量）；
打破
案例“ArrowUp”：
设置可选项目（减量）；
打破
案例“输入”：
log（selectedUserItem，itemsByName[selectedUserItem]）；
打破
违约：
console.log（event.key）；
打破
}
},
{
过滤器：（）=>true
},
//确保回调中的数据是最新的依赖项数组。
[selectedUserItem，setSelectedUserItem]
);
//组件的其余部分

Pass

selectedUserItem

to@emilebergron就是这样！把它作为答案，我会给你一些代表。我在底部漏掉了