函数组件不能被赋予 refs。尝试访问此引用将在选择组件中失败

Question

在这里我定义了一个选择组件，如果条件为真，我想显示它。 This select field appears when one of the values ​​of the previous select input is selected.但是这里是当新的选择字段（即我的选择组件），我从这个选择中选择一个值，这个值不是由我的表单提交的，并且在我提交表单后执行控制台日志时不存在于我的数据中，但值字段的名称在那里，但不是值。我的控制台中有一条警告说明： 警告：函数组件不能被赋予 refs。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef() 吗？

查看Controller的渲染方法

我的选择组件

export const SelectCompanyField = () => {
    // const [page, setPage] = useState(1);
    // const [perPage, setPerPage] = useState(10);
    const { data, error } = useSWR<ServerResponse, any>(companyUrls.base, url => getDataByParams(companyUrls.base));
    console.log("Data", data, "Error", error);
    console.log(data?.entities);


    return (

        <Select

            showSearch
            placeholder="Choisir une compagnie"
            optionFilterProp="children"
            filterOption={(input, option: any) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
        >
            {data?.entities.map(d => (
                <option value={d.index} key={d.id}  >
                    {d.name}
                </option>
            ))}

        </Select>


    );
};

条件为真时显示的选择组件

<Col md={24} lg={24} sm={24}>


                    {firstOptionValue &&
                        <div className="ant-form-item">
                            <label className="label">Compagnie <span className="text-danger">*</span></label>

                            <Controller

                                as={<SelectCompanyField />}
                                name="company"
                                control={control}
                                defaultValue={""}
                                rules={{ required: false }}

                            {errors.company && "Company is required"}
                        </div>

                    }
                </Col>

我的数据提交的控制台日志

{
    "firstName": "Atom",
    "lastName": "Proton",
    "username": "xyz@test.ml",
    "password": "00789",
    "phoneNumber": "44258569",
    "profile": "ADMIN",
    "userType": "B2B_CLIENT",
    "company": ""
}

带有空引号的公司部分是它应该具有我在选择组件中选择的字段值的部分。 我只想将字段或选项的选定值显示在我的数据中，以便我可以提交我的表单。 谢谢

Answer 1

SelectCompanyField 必须是：

export const SelectCompanyField = React.forwardRef(() => {
 ...
});

当使用Controller 的as 属性进行渲染时，它会将ref 属性传递给as 属性。 React 看到 ref 被传递，但你没有使用 forwardRef 组件。

除此之外，您还需要实际使用 SelectCompanyField 提供的 Controller 提供的 ref（和 props）

docs will help you out

☝️ 请阅读文档，但您的 SelectCompanyField 会收到这样的道具：

export const SelectCompanyField = React.forwardRef(({field,meta}) => {
   const { onChange, onBlur, value, ref } = field

   return <Select onChange={onChange} value={value} .../>
});

将onChange 处理程序和value 添加到您正在呈现的Select 组件是您的工作。我不知道Select 是什么组件——它是一个组件框架吗？它只是一个普通的select 吗？ - 所以我不能告诉你怎么做，但是钩子表单文档很清楚。