当使用react钩子窗体的setValue时，Material UI TextField不更新值

我正在尝试设置从props获得的新值，然后用react hook表单库的setValue更新TextField组件。

问题是，值有时保持为空，有时标签不浮动(收缩(。

Codesandbox(请注意，我在那里为TextField构建了包装器组件(https://codesandbox.io/s/romantic-bird-tq4sf?file=/src/App.js

setValue("business_name", "netanel" || someData);

此代码将覆盖该值。如果为true，则此代码会将netanel写入字段，但情况始终如此。关联问题。

这样做：

setValue("business_name", someData);

所以someData总是被定义的。

由于您已经在此处定义销毁中的回退值：{ someData = "netanel" }

更新：

为了防止标签错误，您需要定义一个默认值，这样传递的初始值就不会为null或未定义。

因此，将您的文本字段更改为：

<Controller
as={MuiTextField}
name={name}
control={control}
label={label}
defaultValue=""
/>

它是有效的。

好吧，如果标签不是浮动的或收缩的，那么我想你试图插入到字段中的值只是一个空字符串？此外，考虑从useEffect中完全删除依赖数组，如下所示：

useEffect(() => {
// Code here
})

而不是这个：

useEffect(() => {
// Code here
}, [.....]) <-- REMOVE THAT ARRAY

也许可以尝试一下——结合之前的答案？

参考https://github.com/react-hook-form/react-hook-form/discussions/8544

您需要用控制器包装TextField

示例(您可以使用TextField而不是Select(：https://codesandbox.io/s/admiring-curie-stss8q?file=/src/App.js

相关内容