如果您使用 antd，F(xiàn)orm那么您必須將輸入元素包裝在Form.Item組件中。組件Form.Item有一個(gè)name道具。當(dāng)您使用您提供的任何formInstance方法時(shí)，您可以引用給定的輸入組件。所以當(dāng)你這樣做時(shí)，你實(shí)際上并沒有表單項(xiàng)，所以我認(rèn)為這就是 antd 沒有設(shè)置它的值的原因。nameForm.ItemformInstance.setFieldsValue({ subList: value.list });subList
話雖如此，您的第二個(gè)選擇應(yīng)該如下所示：
<Form.Item name="subList">
<Select ... >
{formInstance.getFieldValue("subList")?.map ... }
</Select>
</Form.Item>
不要忘記首先包裝它Select，以及您的任何其他輸入組件Form。您賦予 的名稱Form.Item是您能夠讀取Form的onFinish方法中的值的方式。
有關(guān)此類用法的工作示例，您可以從 antd 表單文檔中查看此示例： https: //codesandbox.io/s/n1zdn。
formInstance.setFieldsValue({ subList: value.list });我應(yīng)該提到，對(duì)我來說，當(dāng)您在第一個(gè)Select中執(zhí)行操作時(shí)似乎是錯(cuò)誤的onChange（因?yàn)関alue是一個(gè)數(shù)字，所以value.list未定義），但我相信這是因?yàn)槟峁┑闹皇菍?shí)際代碼的粗略、不完整的副本。但是，如果您在這個(gè)問題上遇到更多困難，請(qǐng)發(fā)表評(píng)論，我會(huì)盡力提供更多幫助！
編輯
為了回答您的評(píng)論，我設(shè)法確定的問題是，當(dāng)從第一個(gè)選擇中選擇一個(gè)選項(xiàng)時(shí)，您將第二個(gè)選擇的值設(shè)置為array。您真正想要做的是設(shè)置第二個(gè)選擇的可用選項(xiàng)，而不是它的值。
因此，我建議的更改是讓您在狀態(tài)變量中設(shè)置第二個(gè)選擇的選項(xiàng)，如下所示：
const [list, setList] = useState([]);
const [secondList, setSecondList] = useState([]);
// ...
return (
<>
<Form form={formInstance}>
<Form.Item>
<Select
style={{ width: 120 }}
onSelect={value => {
console.log(list.find(o => o.id === value).list);
setSecondList(list.find(o => o.id === value).list);
}}
>
{list.map(value => {
return (
<Option key={value.id} value={value.id}>
{value.name}
</Option>
);
})}
</Select>
</Form.Item>
<br />
<br />
<Form.Item name="subList">
<Select
style={{ width: 120 }}
onChange={value => {
console.log(value);
}}
>
{secondList?.map(value => {
return (
<Option key={value.id} value={value.id}>
{value.desc}
</Option>
);
})}
</Select>
</Form.Item>
</Form>
</>
);
