React google 自动完成 - 不受控制的输入警告

Question

在React应用程序中，我添加了

react-google-autocomplete

和

antd

包并像

一样使用它

import { Button, Input, Form, Row, Col } from "antd";

....

const getCityFromPlace = (place) => {
    let city = "";

    place.address_components.forEach((component) => {
      if (component.types.includes("locality")) {
        city = component.long_name;
      }
    });

    return city;
  };

  const getStateFromPlace = (place) => {
    let state = "";

    place.address_components.forEach((component) => {
      if (component.types.includes("administrative_area_level_1")) {
        state = component.long_name;
      }
    });

    return state;
  };

  const getZipCodeFromPlace = (place) => {
    let zipCode = "";

    place.address_components.forEach((component) => {
      if (component.types.includes("postal_code")) {
        zipCode = component.long_name;
      }
    });

    return zipCode;
  };

  return (
    <>
      <div className="mt3">
        <Title>Personal Details</Title>
      </div>
      <div className="flex-center">
        <Form
          name="basic"
          className="mt2"
          initialValues={{}}
          form={form}
          layout="vertical"
          size="large"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          style={{
            width: 800,
          }}
          validateMessages={{
            required: "Cannot be blank",
          }}
        >
          <Row gutter={[16, 16]}>
            <Col span={24}>
              <Form.Item
                label="Address 1"
                name="address1"
                size="large"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Autocomplete
                  apiKey={"AIzaSyBLZDsWPlLuThrwkM1dxKZVW4oBdAYJL5A"}
                  onPlaceSelected={(place) => {
                    form.setFieldsValue({
                      address1: place.formatted_address,
                      city: getCityFromPlace(place),
                      state: getStateFromPlace(place),
                      zipcode: getZipCodeFromPlace(place),
                    });
                  }}
                  placeholder="Address 1"
                  className="ant-autocomplete"
                  options={{
                    types: ["(regions)"],
                    componentRestrictions: { country: "us" },
                  }}
                />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={[16, 16]}>
            <Col span={24}>
              <Form.Item
                label="Address 2 (Optional)"
                name="address2"
                size="large"
              >
                <Input placeholder="Address 2" />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={[16, 16]}>
            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
              <Form.Item
                label="City"
                name="city"
                size="large"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Input placeholder="City" />
              </Form.Item>
            </Col>
            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
              <Form.Item
                label="State"
                name="state"
                size="large"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Input placeholder="State" />
              </Form.Item>
            </Col>
            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
              <Form.Item
                label="Zip Code"
                name="zipcode"
                size="large"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Input placeholder="Zip Code" />
              </Form.Item>
            </Col>
          </Row>

          <Row className="flex-center">
            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
              <Form.Item className="mt2">
                <Button type="primary" htmlType="submit" block>
                  Submit Now
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </div>
    </>
  );

但是从自动完成下拉列表中选择地址时会收到类似的警告

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
    at input
    at ReactGoogleAutocomplete (http://localhost:3000/static/js/bundle.js:89511:31)
    at http://localhost:3000/static/js/bundle.js:22495:5
    at StatusProvider (http://localhost:3000/static/js/bundle.js:22365:5)
    at div
    at div
    at div
    at http://localhost:3000/static/js/bundle.js:24219:42
    at FormItemInput (http://localhost:3000/static/js/bundle.js:22770:5)
    at div
    at http://localhost:3000/static/js/bundle.js:24410:18
    at div
    at ItemHolder (http://localhost:3000/static/js/bundle.js:22222:7)
    at Field (http://localhost:3000/static/js/bundle.js:46323:90)
    at WrapperField (http://localhost:3000/static/js/bundle.js:46862:20)
    at InternalFormItem (http://localhost:3000/static/js/bundle.js:22511:5)
    at div
    at http://localhost:3000/static/js/bundle.js:24219:42
    at div
    at http://localhost:3000/static/js/bundle.js:24410:18
    at form
    at Form (http://localhost:3000/static/js/bundle.js:46984:19)
    at FormProvider (http://localhost:3000/static/js/bundle.js:47141:31)
    at FormProvider
    at DisabledContextProvider (http://localhost:3000/static/js/bundle.js:20014:5)
    at InternalForm (http://localhost:3000/static/js/bundle.js:22043:62)
    at div
    at StepThree (http://localhost:3000/static/js/bundle.js:2539:3)
    at div
    at http://localhost:3000/static/js/bundle.js:24219:42
    at div
    at http://localhost:3000/static/js/bundle.js:24410:18
    at div
    at Registration (http://localhost:3000/static/js/bundle.js:3265:88)
    at main
    at http://localhost:3000/static/js/bundle.js:26939:18
    at Content

如何解决此警告以及为什么会出现此警告？

Answer 1

将初始值修改为这个

initialValues={{ address1: "" }}

后就解决了。