Блог

я использую ant design с react для создания редактируемой таблицы с опцией выбора внутри нее. я буду извлекать параметры выбора с помощью хука (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 по-прежнему ничего не отображает внутри него… я проверил данные, возвращаемые из выборки, и они поступают без ошибок, но состояние, похоже, не установлено

теперь он работает, добавляя следующий код после использования 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}
/>
  

Опираясь на ответ OP jihad.khorfan.

Согласно документации antd для компонента Select, тип данных должен быть { label, value }[] . Таким образом, использование value / label является лучшим выбором, чем name / label, особенно когда вам нужно использовать поля, которые не являются дружественными к пользовательскому интерфейсу (например, идентификаторы) для серверной визуализации. Небольшое исправление показано ниже.

 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,
      };
    }
  }
  

Надеюсь, это поможет будущим разработчикам. Публикую новый ответ из-за отсутствия оценки репутации!