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

Question

这里我定义了一个选择组件，我想在条件成立时显示它。当选择前一个选择输入的值 \xe2\x80\x8b\xe2\x80\x8b 之一时，会出现此选择字段。但这里是当新的选择字段（即我的选择组件），并且我从此选择中选择一个值时，该值不是由我的表单提交的，并且当我在提交表单后执行控制台日志时，该值不存在于我的数据中，但是值字段的名称存在，但没有值。我的控制台中有一条警告，指出：\n警告：无法为函数组件提供引用。尝试访问此引用将失败。您的意思是使用 React.forwardRef() 吗？

\n

检查渲染方法Controller

\n

我的选择组件

\n

export const SelectCompanyField = () => {\n    // const [page, setPage] = useState(1);\n    // const [perPage, setPerPage] = useState(10);\n    const { data, error } = useSWR<ServerResponse, any>(companyUrls.base, url => getDataByParams(companyUrls.base));\n    console.log("Data", data, "Error", error);\n    console.log(data?.entities);\n\n\n    return (\n\n        <Select\n\n            showSearch\n            placeholder="Choisir une compagnie"\n            optionFilterProp="children"\n            filterOption={(input, option: any) =>\n                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0\n            }\n        >\n            {data?.entities.map(d => (\n                <option value={d.index} key={d.id}  >\n                    {d.name}\n                </option>\n            ))}\n\n        </Select>\n\n\n    );\n};\n

\n

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

\n

<Col md={24} lg={24} sm={24}>\n\n\n                    {firstOptionValue &&\n                        <div className="ant-form-item">\n                            <label className="label">Compagnie <span className="text-danger">*</span></label>\n\n                            <Controller\n\n                                as={<SelectCompanyField />}\n                                name="company"\n                                control={control}\n                                defaultValue={""}\n                                rules={{ required: false }}\n\n                            {errors.company && "Company is required"}\n                        </div>\n\n                    }\n                </Col>\n

\n

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

\n

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

\n

带有空引号的公司部分应该具有我在选择组件中选择的字段值的部分。\n我只是希望字段或选项的选定值出现在我的数据中，以便我可以提交我的表格。\n谢谢

\n

Answer 1

SelectCompanyField需要是：

\n

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

\n

当使用Controllers asprop 渲染时，它会将一个refprop 传递给asprop。React 看到ref正在传递，但您没有使用forwardRef组件。

\n

除此之外，您还需要实际使用 ref （和 props），而您现在似乎没有这样做，SelectCompanyField因为Controller.

\n

这些文档将为您提供帮助

\n

\xe2\x98\x9d\xef\xb8\x8f 请阅读文档，但您SelectCompanyField收到的道具如下：

\n

export const SelectCompanyField = React.forwardRef(({field,meta}) => {\n   const { onChange, onBlur, value, ref } = field\n\n   return <Select onChange={onChange} value={value} .../>\n});\n

\n

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

\n