在调用useEffect中的函数后，在antd库中设置输入框内的默认值

Question

我有loadProfile我想调用的函数useEffect。如果在loadProfile内调用该函数useEffect，则名称Mario应显示在输入name字段内。如何antd在输入库中设置默认值？我尝试使用，defaultValue但输入字段仍为空。

这里的例子：https : //stackblitz.com/edit/react-311hn1

const App = () => {

    const [values, setValues] = useState({
        role: '',
        name: '',
        email: '',
        password: '',
        buttonText: 'Submit'
    });

    useEffect(() => {
        loadProfile();
    }, []);

    const loadProfile = () => { 
        setValues({...values, role, name="Mario", email});
    }

    const {role, name, email, buttonText} = values;



    const updateForm = () => (
        <Form
            {...layout}
            name="basic"
            initialValues={{
                remember: true,
                name: name
            }}
        >
            <Form.Item
                label= 'Name'
                name='name'
                rules={[
                    {
                        required: true,
                        message: 'Please input your name!',
                    },
                ]}
            >
                <Input 
                    defaultValue= {name}
                />
            </Form.Item>

            <Form.Item
                label="Email"
                name="email"
                value={email}
                rules={[
                    {
                        type: 'email',
                        required: true,
                        message: 'Please input your email!',
                    },
                ]}
            >
                <Input 
                />
            </Form.Item>

            <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">
                    {buttonText}
                </Button>
            </Form.Item>
        </Form>
    );

    return (
        <>
            <Row>
                <Col span={24} style={{textAlign: 'center'}}>
                  <h1>Private</h1>
                  <p>Update Form</p>
                </Col>
            </Row>
                {updateForm()}
        </>
    );
};

Answer 1

您必须对代码进行三处更改。这是一个工作组件，我还提取了您的组件并将适当的状态放在那里。我也让它发挥作用。

https://stackblitz.com/edit/react-tlm1qg

第一次改变

setValues({...values, role, name="Mario", email});

到

setValues({...values, name: "Mario"});

这将正确设置状态。

第二个变化：

接下来，您应该注意到，如果您设置defaultValue="test123"它仍然不起作用，则说明出了点问题。name从Form.Item它的工作中取出并繁荣。test123出现。但是如果你放在values.name那里，它仍然不起作用！

第三次改动：

那是因为defaultValue仅在创建组件时才正确设置该值，而不是在安装时。所以你必须使用value={values.name}它，它会根据你的挂载设置一次该值useEffect

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

如果您查看Ant Design的常见问题解答，它会说：

Form.Item 中带有 name 属性的组件将变为受控模式，这使得 defaultValue 不再起作用。请尝试使用 Form 的 initialValues 来设置默认值。

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!
    >

我更新了我的在线示例。

大图 - 当你想在创建后设置值时，使用这个钩子和 form.setFieldsValue