Входной компонент Ant Design не обновляет значение

Question

Я пытаюсь получить значение из серверной части и добавить результат к значению поля ввода, но оно не будет обновлено.

В настоящее время я использую формы Ant Design, и если поле ввода перемещается из формы, оно работает .

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>
      );
    }

значение не добавляется в поле ввода

Answer 1

При использовании поля name в Form.Item это означает, что компонент Form будет обрабатывать поля value и handleChange в этом поле. Вам не нужно добавлять их. Поэтому, если вам нужно добавить value и handleChange, удалите name prop из Form.Item, как вы видите здесь

Но используя в большинстве случаев, вы захотите использовать их. В этом случае альтернативой является использование 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 Демо-документы

Stackblitz Demo