Javascript 在useffect中调用函数后，在antd库的输入字段中设置默认值

我有我想在

useffect

中调用的

loadProfile

函数。如果在

useffect

中调用了

loadProfile

函数，则名称

Mario

应显示在输入

name

字段中。如何在

antd

库内部输入中设置默认值？我尝试使用

defaultValue

，但输入字段仍然为空

示例如下：

const-App=（）=>{
const[values，setValues]=useState({
角色：“”，
名称：“”，
电子邮件：“”，
密码：“”，
buttonText:“提交”
});
useffect（（）=>{
loadProfile（）；
}, []);
const loadProfile=（）=>{
setValues（{…values，role，name=“Mario”，email}）；
}
const{role，name，email，buttonText}=value；
const updateForm=（）=>(
{buttonText}
);
返回(
私有的
更新表格

{updateForm（）}
);
};

您必须对代码进行三次更改。这是一个工作组件，我还提取了您的组件并将适当的状态放入其中。我还使它功能化

第一次改变

setValues（{…values，role，name=“Mario”，email}）

到

setValues（{…values，名称：“Mario”}）

这将正确设置状态

第二个变化：

接下来，您应该注意到，如果您设置了
defaultValue=“test123”
，它仍然不起作用，则出现了一些问题。从
表单中删除
名称
。项目
，然后启动它<代码>测试123
显示。但是如果你把
values.name
放在那里，它仍然不起作用

第三个变化：

这是因为
defaultValue
仅在创建组件时设置正确的值，而不是在装载时设置正确的值。因此，您必须使用
value={values.name}
，它将在每次装入
useffect
时设置该值一次

在演示组件中，我还为您添加了一个更改处理程序，以便用户可以在其中键入，如果您需要的话


如果你看一下for Ant的设计，它会说：

表单中的组件。具有name属性的项将变为
受控模式，使defaultValue不再工作。请试一试
初始化窗体的值以设置默认值

Ant Design正在接管控制权-因此您不必设置
value={name}
和
onChange

您希望在创建组件后设置值。所以要做到这一点，你需要

  const [form] = Form.useForm();
  
  React.useEffect(() => {
    form.setFieldsValue({
      username: 'Mario',
    });
  }, []);

在表格中，请确保添加：

    <Form
        {...layout}
        name="basic"
        initialValues={{
            remember: true,
        }}
        form={form} // Add this!
    >



我更新了我的在线示例

大画面-当您想在创建后设置值时，请使用此钩子和
表单。setFieldsValue
这不会修复它，但您的setValues是不正确的，实际上它不会做任何事情<代码>设置值（{…值，名称：“Mario”}）改用冒号。您所在州的名称始终为“”，而不是
Mario
。更改后，您的状态至少是正确的（由于某种原因，
defaultValue
不起作用，只需将其更改为字符串
test
，并查看它是否起作用。@Diesel我将其更改为字符串
defaultValue=“Mario”
。但它仍然不起作用为您发布了一个答案和工作示例。@Diesel但是规则停止了工作
rules={[{required:true，消息：'请输入您的姓名！'，}，]}
更新了我的答案。
    <Form
        {...layout}
        name="basic"
        initialValues={{
            remember: true,
        }}
        form={form} // Add this!
    >