Question

我定义了一个 selectinputField 组件，并在我的表单中调用它，但我有一个错误说：

React 检测到 FormContent 调用的 Hook 的顺序发生了变化。

我的 SelectInputField

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>


);

};

我的表单中存在错误的部分

   {firstOptionValue && 
    <Col md={24} lg={24} sm={24}>
                    <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>
}

如果 firstOptionValue 为真，列应该出现。但是当 firstOptionValue 为 true 时，我会收到上面提到的错误。

我尝试了一个替代方案，即直接用firstOptionValue调用我的select组件，但是当我提交表单时，select组件的输入中选择的值，提交后没有出现在我的数据中，而其他的出现.

替代方案

<Col md={24} lg={24} sm={24}>
          <div className="ant-form-item">
                 <label className="label">Compagnie <span className="text-danger">*</span></label>
{firstOptionValue && <SelectCompanyField/>
                    
                        {errors.company && "Company is required"}
                    </div>

                </Col>

谢谢

警告：React 检测到 FormContent Select 调用的 Hooks 的顺序发生了变化

0 个答案: