状态更新未反映在自定义挂钩中

Question

我正在使用 react-redux 来存储状态 modeData，这是一个对象数组。使用 react-hotkeys-hook，当用户按下 ctrl+l 时，将运行一个更新状态的函数。在同一个函数中，当我console.log相同的状态时，它不反映变化。
这是我正在使用的代码：

import { useSelector, useDispatch } from "react-redux";
import { modeDataIncrement } from "./redux/modeSlice";
import { useHotkeys } from "react-hotkeys-hook";
import { useEffect } from "react";

//..

const modeData = useSelector((state) => state.mode.modeData);  //array of objects.

const handler = (id) => {
    const isActive = modeData.find((x) => x.id === id).active;
    console.log(modeData);      // does not show the updated state
    dispatch(modeDataIncrement(id));
  };


useHotkeys("ctrl+l", () => handler("Clone"));

useEffect(() => {
    console.log(modeData);  //working fine!
  }, [modeData]);

modeSlice.js:

import { createSlice } from "@reduxjs/toolkit";

export const modeSlice = createSlice({
  name: "mode",
  initialState: {
    modeData: [{ id: "Clone", active: false }],
  },
  reducers: {
    modeDataIncrement: (state, action) => {
      state.modeData.find(
        (e) => e.id === action.payload && (e.active = !e.active)
      );
    },
  },
});

export const { modeDataIncrement } = modeSlice.actions;
export default modeSlice.reducer;

对我做错了什么有什么想法吗？
谢谢！

Answer 1

您的代码需要使用最新版本的modeData，但是基于source code of useHotkeys，它会memoize函数，不会自动更新。因此，您始终使用第一个渲染中存在的回调版本。

要解决此问题，您需要将依赖项数组传递给 useHotkeys，这样它可以破坏记忆：

const handler = (id) => {
  const isActive = modeData.find((x) => x.id === id).active;
  console.log(modeData); 
  dispatch(modeDataIncrement(id));
};

useHotkeys("ctrl+l", () => handler("Clone"), [modeData]);

状态更新未反映在自定义挂钩中

State update not reflecting in custom hook

javascript

reactjs

react-redux

react-hooks