Reactjs 如何使用ant design动态生成选择组件的选项
我正在使用ant design和react生成一个可编辑的表,其中包含一个select选项 我将使用一个钩子(figbird)获取select选项,这将需要一些时间来获取,但是select将在没有选项的情况下呈现。 我试图将数据(选项数组)保存在这样一个状态中Reactjs 如何使用ant design动态生成选择组件的选项,reactjs,antd,Reactjs,Antd,我正在使用ant design和react生成一个可编辑的表,其中包含一个select选项 我将使用一个钩子(figbird)获取select选项,这将需要一些时间来获取,但是select将在没有选项的情况下呈现。 我试图将数据(选项数组)保存在这样一个状态中 const lines = useFind("lines"); let [lineNumber, setLineNumber] = useState(); const options = { lines: []
const lines = useFind("lines");
let [lineNumber, setLineNumber] = useState();
const options = {
lines: [],
};
if (lines.error) return "Failed to load resource Machine Status";
if (lines.status === "loading") {
options.lines[0] = {};
setLineNumber[0] = { value: "loading" };
} else {
let arr = lines.data.map((line, i) => {
console.log(i, line);
options.lines[i] = {};
return { value: line.line_number };
});
setLineNumber = arr;
}
然后渲染我的表并选择其中的组件
<Formik
initialValues={{ machine_name: "", password: "", remember: false }}
validationSchema={LoginSchema}
onSubmit={onSubmit}
>
{({ values, handleSubmit }) => (
<Form {...layout} onSubmit={handleSubmit}>
<Form.Item name="machine_name" label="Name">
<Input
name="machine_name"
placeholder="Machine Name"
prefix={<TagOutlined />}
value={values.machine_name}
/>
</Form.Item>
<Form.Item name="machine_line" label="Line">
<Select
prefix={<ClusterOutlined />}
name="machine_line"
style={{ width: "100%" }}
value={values.machine_line}
>
{lineNumber.map((line) => {
return (
<Option value={line.line_number}>
{line.line_number}
</Option>
);
})}
</Select>
</Form.Item>
<Form.Item name="url" label="URL">
<Input
name="url"
placeholder="URL"
prefix={<LinkOutlined />}
value={values.url}
/>
</Form.Item>
<Row>
<Col offset={6} span={4}>
<SubmitButton>Submit</SubmitButton>
</Col>
<Col offset={5} span={4}>
<ResetButton>Reset</ResetButton>
</Col>
</Row>
,
</Form>
)}
</Formik>
{({values,handleSubmit})=>(
{lineNumber.map((行)=>{
返回(
{line.line_number}
);
})}
提交
重置
,
)}
但“选择”仍然不会在其内部渲染任何内容。。。我检查了从fetch返回的数据,它没有出现错误,但是状态似乎没有被设置现在,它在使用useFind(获取数据的钩子)后通过输入以下代码工作
if(lines.error)返回“加载资源机器状态失败”;
如果(lines.status==“success”){
for(设i=0;i
在那之后,把选择选项
<Select
loading={lines.data.status}
prefix={<ClusterOutlined />}
options={options["lines"]}
name="machine_line"
style={{ width: "100%" }}
value={values.machine_line}
/>
尝试并记录行号
它给了我未定义的。。。如果我将useState()更改为useState([]),它将为我提供[]
<Select
loading={lines.data.status}
prefix={<ClusterOutlined />}
options={options["lines"]}
name="machine_line"
style={{ width: "100%" }}
value={values.machine_line}
/>