为什么useState值没有在useHotkeys回调中更新？

Question

我有下面的搜索建议和使用react-hotkeys-hooks管理按键的React。

为什么selectedUserItem不更新按键进入？当上下键改变时，它保持为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;

Answer 1

useHotkeys内部使用useCallback和useEffect挂钩，它们需要知道某些依赖项何时发生变化。为了确保它与这些钩子一起很好地工作，useHotkeys offers to pass a deps array (和其他钩子提到的一样)是它的最后一个参数。

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