如何使用formik 2和react-table 7渲染可编辑表?

问题描述 投票:0回答:1

在这种情况下,我从服务器加载表单的数据(假设用户实体包含用户的朋友列表)。>>

该表单具有可编辑名称的朋友列表,这些列表呈现为带有react-table 7的表。我面临的问题是,每当我尝试在此列表中编辑朋友的姓名时,我只能输入单个字符,然后输入将失去焦点。我再次单击输入,键入1个字符,它再次失去焦点。

我创建了一个codeandbox来说明问题:https://codesandbox.io/s/formik-react-table-hr1l4

我了解为什么会发生这种情况-由于formik状态发生变化,因此每次键入该表都会重新渲染-但我不确定如何防止这种情况发生。我useMemo -ed和useCallback -ed我所能想到的所有内容(还React.memo -ed组件是希望能够防止出现此问题),但到目前为止还没有运气。

[如果我删除useEffect中的Friends,它确实起作用,但是,这会使该表在超时到期后不会更新(因此,它不会在1秒后显示2个朋友)。非常感谢您的帮助...我整天都在解决这个问题。

我有这种情况,我从服务器(例如,一个带有用户的朋友列表的用户实体)加载表单的数据。表单上有一个好友列表,其中的可编辑名称显示为表格...

reactjs react-hooks formik react-table
1个回答
1
投票

哇,React附带的所有不同的钩子让您真的很开心;-)我看了您的codeandbox大约有15分钟了。我的意见是,对于这样一个简单的任务,它是过度设计的。没有恶意。我会怎么做:

© www.soinside.com 2019 - 2024. All rights reserved.