React useRef 值修改了两次

问题描述

我对 React 很陌生，并尝试使用 useRef 将当前选定的项目存储在列表中。它是一个 AutoCompleteDialog，组件在其中获取所有可用项目、过滤器字符串、打开状态、位置和 selectionMove 事件。

keydown 事件在父组件中捕获，此事件通过 AutoCompleteDialog 属性传播到 selectionMove。

我有以下代码：

export const AutoCompleteDialog = ({items,filter,open=false,top=0,left=0,selectionMove={dir:0}}) => {

    const position = {top: top,left:left};

    const selectedindex = useRef({idx:0});

    console.log('Render');

    if (selectionMove.dir === -1) {
        selectedindex.current.idx = selectedindex.current.idx + 1;
    } else if (selectionMove.dir === 1) {
        selectedindex.current.idx = selectedindex.current.idx - 1;
    }

    console.log('index: ' + selectedindex.current.idx);

我的问题是组件似乎将 useRef 变量增加了两次。 “Render”字符串显示一次，但索引值增加了2而不是1。

以上代码的控制台输出为：

...
Render
index: 7
Render
index: 9
Render
index: 11

我已经删除了 selectedindex 的所有其他用法，但它仍然算作两个。

可能是什么问题？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）