Ant Design 输入组件不更新值答案

【问题标题】：Ant Design Input Component not updating valueAnt Design 输入组件不更新值
【发布时间】：2020-07-11 22:14:19
【问题描述】：

我尝试从后端获取值并将结果附加到输入字段值，但它不会被更新。

目前我使用 Ant Design Forms，如果将输入字段移出 Form，它可以工作。

import { version, Input, Form } from "antd";

function View() {
      const [LegalName, setLegalName] = useState("");

    useEffect(() => {
        axios
          .get("/afterlogin/OrgFullPictureGet/3", config)
          .then(response => {
            setLegalName(response.data.name);

          })
          .catch(error => {
            // console.log(error.response.data.errors);
          });
      }, []);

      const onFinish = values => {
        //onFinish logic here
        console.log(values);
      };
      return (
        <div className="App">
          <Form name="nest-messages" onFinish={onFinish}>
            <Form.Item
              name={["user", "LegalName"]}
              label={<span>Legal Name</span>}

            >
              <Input
                placeholder={"Your business legal name"}
                value={LegalName}
                onChange={e => setLegalName(e.target.value)}
              />
            </Form.Item>
          </Form>


        </div>
      );
    }

值不会附加到输入字段中

【问题讨论】：

@Pranshu Saxena 显示您的输入组件代码。
@VahidAkhtar 他正在使用Ant Design。
您是否在response.data.name 中登录了then？

标签： reactjs antd

【解决方案1】：

当在Form.Item 上使用name 字段时，这意味着Form 组件将从那时起处理该字段上的value 和handleChange。您不需要添加它们。因此，如果您需要添加value 和handleChange，请从Form.Item 中删除name prop，如您所见here

但在大多数情况下，您会想要使用它们。在这种情况下，替代方法是使用 form.setFieldValues 设置所需的值：

const [form] = Form.useForm();
const [legalName, setLegalName] = useState("");

useEffect(() => {
  axios
    .get("/afterlogin/OrgFullPictureGet/3", config)
    .then(response => {
      form.setFieldsValue({
        legalName: response.data.name
      });
    })
    .catch(error => {
      // console.log(error.response.data.errors);
    });
}, []);

return (
  <Form name="nest-messages" form={form} onFinish={onFinish}>
    <Form.Item name="legalName" label={<span>Legal Name</span>}>
      <Input placeholder={"Your business legal name"} />
    </Form.Item>
  </Form>
);

useForm & setFieldValue Demo docs

Stackblitz Demo

【讨论】：