React with Ant Design - 如何在 <Form> 上的多个 <Select>

Question

我是 ReactJS 和 AntDesign 的新手。

我正在尝试获取一组组件<Select>来共享状态，因此当您选择第一个组件时，它会填充表单上下一个组件的选项，它必须是 a <Select>，我不能使用 a<Cascade>因为它会使 UI 变得复杂太多了（用户对计算机不太熟悉）。

这是我想要实现的示例，useEffect 上的数据将来自单个请求中的后端

https://stackblitz.com/edit/react-xarwcj-sghpze?file=index.js

选择第一个选项后，我预计第二个下拉列表将填充子数组，但我得到的是一个空的下拉列表。

我很确定该值已被设置，但由于我的一些配置错误，React 或 Ant 没有重新渲染它，但我无法理解为什么。

Answer 1

如果您使用 antd，Form那么您必须将输入元素包装在Form.Item组件中。组件Form.Item有一个name道具。当您使用您提供的任何formInstance方法时，您可以引用给定的输入组件。所以当你这样做时，你实际上并没有表单项，所以我认为这就是 antd 没有设置它的值的原因。nameForm.ItemformInstance.setFieldsValue({ subList: value.list });subList话虽如此，您的第二个选择应该如下所示：<Form.Item name="subList">&nbsp; <Select ... >&nbsp; &nbsp; {formInstance.getFieldValue("subList")?.map ... }&nbsp; </Select></Form.Item>不要忘记首先包装它Select，以及您的任何其他输入组件Form。您赋予 的名称Form.Item是您能够读取Form的onFinish方法中的值的方式。有关此类用法的工作示例，您可以从 antd 表单文档中查看此示例： https: //codesandbox.io/s/n1zdn。formInstance.setFieldsValue({ subList: value.list });我应该提到，对我来说，当您在第一个Select中执行操作时似乎是错误的onChange（因为value是一个数字，所以value.list未定义），但我相信这是因为您提供的只是实际代码的粗略、不完整的副本。但是，如果您在这个问题上遇到更多困难，请发表评论，我会尽力提供更多帮助！编辑为了回答您的评论，我设法确定的问题是，当从第一个选择中选择一个选项时，您将第二个选择的值设置为array。您真正想要做的是设置第二个选择的可用选项，而不是它的值。因此，我建议的更改是让您在状态变量中设置第二个选择的选项，如下所示：const [list, setList] = useState([]);const [secondList, setSecondList] = useState([]);// ...return (&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; <Form form={formInstance}>&nbsp; &nbsp; &nbsp; &nbsp; <Form.Item>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Select&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{ width: 120 }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onSelect={value => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(list.find(o => o.id === value).list);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setSecondList(list.find(o => o.id === value).list);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {list.map(value => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Option key={value.id} value={value.id}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {value.name}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Select>&nbsp; &nbsp; &nbsp; &nbsp; </Form.Item>&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <Form.Item name="subList">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Select&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{ width: 120 }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={value => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(value);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {secondList?.map(value => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Option key={value.id} value={value.id}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {value.desc}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Select>&nbsp; &nbsp; &nbsp; &nbsp; </Form.Item>&nbsp; &nbsp; &nbsp; </Form>&nbsp; &nbsp; </>&nbsp; );