如何使用 ant design 动态生成选择组件的选项答案

【问题标题】：how generate options for select component dynamically with ant design如何使用 ant design 动态生成选择组件的选项
【发布时间】：2020-11-13 13:15:41
【问题描述】：

我正在使用带有 react 的 ant design 来生成一个可编辑的表格，里面有一个选择选项我将使用钩子（figbird）获取选择选项，这将需要一些时间来获取，但选择将呈现其中没有选项。我试图将数据（选项数组）置于这样的状态

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>

但 select 仍然没有在其中呈现任何内容...我检查了从 fetch 返回的数据，它没有出现错误，但状态似乎尚未设置

【问题讨论】：

尝试控制台记录lineNumber
它给了我未定义...如果我将 useState() 更改为 useState([]) 它给了我 [ ]

标签： reactjs antd

【解决方案1】：

现在它可以通过在使用 useFind（获取数据的钩子）之后放置以下代码来工作

if (lines.error) return "Failed to load resource Machine Status";
  if (lines.status === "success") {
    for (let i = 0; i < lines.data.length; i++) {
      options.lines[i] = {
        value: lines.data[i].line_number,
        name: lines.data[i].line_number,
      };
    }
  }

然后放选择选项

<Select
  loading={lines.data.status}
  prefix={<ClusterOutlined />}
  options={options["lines"]}
  name="machine_line"
  style={{ width: "100%" }}
  value={values.machine_line}
/>

【讨论】：

【解决方案2】：

以 OP jihad.khorfan 的回答为基础。

根据Select component的antd文档，数据类型应该是{ label, value }[]。因此，使用值/标签是比名称/标签更好的选择，尤其是当您需要使用对用户界面不友好的字段（例如 ID）进行后端渲染时。下面是一个小修复。

if (lines.error) return "Failed to load resource Machine Status";
  if (lines.status === "success") {
    for (let i = 0; i < lines.data.length; i++) {
      options.lines[i] = {
        value: lines.data[i].line_number,
        label: lines.data[i].line_number,
      };
    }
  }

希望这对未来的开发者有所帮助。由于缺乏声誉分数而发布新答案！

【讨论】：