【问题标题】：Values are not initialized in react js值未在反应 js 中初始化
【发布时间】：2020-03-31 15:12:28
【问题描述】：

我有一个表单，我在其中设置每个输入的默认值。初始值之前用useEffect设置：

  const [text, setText] = useState({ note: "", gender: "" });
  useEffect(() => {
    setText({
      note: "2",
      gender: "demo"
    });
  }, []);

之后我以这种方式设置表单的默认值：

<Form
      initialValues={{ note: text.note, gender: text.gender }} //default values
      {...layout}
      form={form}
      name="control-hooks"
      onFinish={onFinish}
    >

问题是我可以获取输入中的值，可能它们无法设置为默认值。如何解决？

链接到我的应用程序：https://codesandbox.io/s/form-methods-ant-design-demo-kbwgk

【问题讨论】：

标签： reactjs

【解决方案1】：

你应该设置里面useState:

useState({ note: "2", gender: "demo" })

如果你设置了内部的 useEffect 表单已经被 useState 中的空值初始化了

https://codesandbox.io/s/form-methods-ant-design-demo-whq5v

【讨论】：

【解决方案2】：

在初始化时设置默认值

您正在使用 useEffect 进行额外的渲染。只需在 useState 函数中设置默认值即可。

const [text, setText] = useState({ note: "2", gender: "demo" });

确保检测到更改

您的值应该是不可变的，以便可以检测到更改。我建议在使用它们时分散这些值，以便它们显示为一个新对象。

<Form
  initialValues={{...text}}
  {...layout}
  form={form}
  name="control-hooks"
  onFinish={onFinish}
>

【讨论】：

【解决方案3】：

你应该在第一次渲染上使用initialValues，useEffect你设置它在第二次渲染（这就是useEffect的工作原理，有足够的材料在整个网站上）。

<Form initialValues={{ note: "2", gender: "demo" }} />;

【讨论】：

但如果我不能直接设置initialValues={{ note: "2", gender: "demo" }}，这将是解决方案，但我想以这种方式initialValues={{ note: text.note, gender: text.gender }}。你怎么看？
您问如何初始化表单，这就是答案。如果其他东西对它有好处

【解决方案4】：

已解决：form.setFieldsValue({note: text.note, gender: text.gender})

【讨论】：

这是一个动态字段集，没有真正的初始化（应该在组件挂载上发生一次），正确的方法在文档中使用Form.create
@DennisVash，我在 antd 网站上找到了这个：You cannot set value for each form control via value or defaultValue prop, you should set default value with initialValues of Form. Note that initialValues cannot be updated by setState dynamiclly, you should use setFieldsValue in that situation.
看我的回答，至于v4，initialValues是第一次渲染
@DennisVash，你能告诉我如何使用Form.create吗？
@DennisVash，我在文档中发现我可以使用这个：React.useEffect(() => { form.setFieldsValue({ username: 'Bamboo', }); }, []);，但使用 useEffect，初始值不会出现。我还发现了这个：Since Form.create() is removed, origin onFieldsChange or other methods moved to Form, and control by fields. ref example