Проблема с машинописным текстом при отображении через массив из формы antd

Я создаю простую веб-страницу на React + TS с библиотекой дизайна ant, и у меня проблема с типами в компоненте формы. Я создал массив для отображения через них и рендеринга формы.

https://codesandbox.io/s/relaxed-mountain-vb1b0e?from-embed

Это выглядит как элемент массива, который дает мне ошибку.

const FormItems = [
  // {              
  //   name: 'name',
  //   label: 'Imię/ firma',
  //   rules: { required: true },  <----- this element is good
  //   inputType: <Input />,
  // },
  {
    name: 'email',
    label: 'Email',
    rules: { type: 'email', required: true }, <---- this element giving an error
    inputType: <Input />,
  },
];

ОШИБКА / / /

Type '{ type: string; required: boolean; }' is not assignable to type 'Rule'.
  Type '{ type: string; required: boolean; }' is not assignable to type 'ArrayRule'.
    Types of property 'type' are incompatible.
      Type 'string' is not assignable to type '"array"'.ts(2322)

И эта ошибка возникает в этом фрагменте кода:

{FormItems.map((item) => (
          <Form.Item
            name = {['user', item.name]}
            label = {item.label}
            rules = {[item.rules]} <--- item.rules are underlined
          >
            {item.inputType}
          </Form.Item>
        ))}

Form.Item — это просто оболочка для npmjs.com/package/rc-field-form#rule.

Marko Taht 23.11.2022 20:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
129
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Проп ожидает значение string, а не значение boolean, обратитесь к документации здесь и здесь , однако я не могу воспроизвести эту ошибку, если возможно, попробуйте воспроизвести ее на codeandbox.io или аналогичный сервис.

  {
    name: "email",
    label: "Email",
    rules: {
      type: 'boolean',
      required: true
    },
    inputType: <Input />
  }

О да, конечно, нужна веревка. Это было для целей тестирования. Отредактировал пост об этом и добавил песочницу codeandbox.io/s/relaxed-mountain-vb1b0e?from-embed

Mikołaj Wittbrodt 23.11.2022 20:29
Ответ принят как подходящий

Antd предоставляет определение типа реквизитов правил. Вы можете импортировать его следующим образом:

import { Rule } from 'antd/es/form';

Теперь вы можете определить тип вашего списка FormItems следующим образом:


import { Rule } from 'antd/es/form';
import { ReactNode } from 'react';

type FormItemsListType = {
    name: string;
    label: string;
    rules: Rule[];
    inputType: ReactNode;
};

const FormItems: FormItemsListType[] = [
    {
        name: 'email',
        label: 'Email',
        rules: [{ type: 'boolean', required: true }],
        inputType: <Input />
    }
];

Другие вопросы по теме