Блог

Я впервые внедряю FieldArray из redux-form, и пользовательский интерфейс работает нормально (хотя, похоже, есть некоторые общие последствия, которые я еще не диагностировал). Идея заключается в том, что вы нажимаете кнопку «ДОБАВИТЬ», чтобы добавить в форму еще одну «комнату», которая является просто текстовым полем (игнорируйте компонент кнопки, это пользовательский компонент)

Однако код проверки не компилируется. Кажется, я сталкиваюсь с типами и не уверен, как правильно это сделать в typescript. Я использую руководство из этого примера о том, как выполнить проверку, но этот пример является чистым javascript.

Ошибка заключается в:

 Type '{ _error: string; }' is not assignable to type 'string | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | undefined'.
  

Вот метод, который отображает fieldarray:

 const renderRoomNames = (fieldProps: WrappedFieldArrayProps<string>) => (
    <Grid container spacing={4}>
      {fieldProps.fields.map((name: string, index: number) => {
        console.log('room - name', name);
        return (
          <Grid item xs={12} key={`gridroom${index   1}`}>

            <Field            
              name={`${name}`}
              type="text"
              label={"Room "   (index   1)}
              placeholder={`Enter a name for this room`}
              component={ReduxFormTextField}       
              required={true}
              disabled={isSuccessful}
              fullWidth      
            />
     
          </Grid>
      )})}
      <Grid item xs={12}>
        <StandardButtonBase
          variant="contained"
          color="primary"
          startIcon={<AddIcon />}
          align="right"
          disableTooltip={true}
          round={true}
          onClick={() => fieldProps.fields.push('')}
          buttonText="Add Room"
        />
        {fieldProps.meta.submitFailed amp;amp; fieldProps.meta.error amp;amp; <span>{fieldProps.meta.error}</span>}
      </Grid>
    </Grid>
  )

return (
   <FieldArray name="roomNames" component={renderRoomNames} />
)
  

И код проверки:

 export const requestVirtualClinicFormDataValidator = (
  model?: IModel
): FormErrors<IModel> => {
  const errors: FormErrors<IModel> = {};

  if (!model) {
    errors._error = 'SNIP';
    return errors;
  }

  // General room name errors checked first
  if (isEmpty(model.roomNames) || model.roomNames.length === 0) {
    errors.roomNames = 'You require at least one room '
  } else if (model.roomNames.some((x) => isEmpty(x))) {
    errors.roomNames = { _error: 'All room names must have a value' };
  } else {
    // Specific individual room name checks second
    const roomNameErrors:any[] = [];

    if (model.roomNames.length === 1 amp;amp; isEmpty(model.roomNames[0])) {
      roomNameErrors[0] = { _error: 'You must provide a name for your room' };     
    } else {        
      for (let i=0; i < model.roomNames.length; i  ) {
        const roomName = model.roomNames[i];
        const count = model.roomNames.filter(x => x.toLowerCase() === roomName.toLowerCase()).length;
        if (count > 1) {
          roomNameErrors[i] = { _error: 'All rooms must have a unique name' }
        }
      }
      
      if (roomNameErrors amp;amp; roomNameErrors.length > 0) {
        errors.roomNames = roomNameErrors;
      }
    }
  }

  return errors;
};
  

Проблема заключается в компиляции. Ему не нравится _error: часть, ему нужна прямая строка.

Однако это также не позволит использовать строку errors.roomNames = roomNameErrors; , если оставить roomNameErrors в виде массива строк. Это вместо этого приводит к этой ошибке:

 Type 'string[]' is not assignable to type 'string | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | undefined'.
  

Кажется, что, хотя свойство ‘roomNames’ в моей модели является строковым массивом, определение типа для этого требует только компонента react или string. Как мне передать обратно ошибки проверки для данного поля в массиве полей, используя typescript? Приведенный ранее пример просто не передает типизацию typescript, поскольку они в настоящее время настроены.

Использование redux-формы 8.2.

Я обнаружил, что определения типов действительно были неправильными. Переключив ошибки с FormErrors на type Any, все это скомпилировалось и фактически заработало. Я зарегистрирую проблему с определенно введенным репозиторием, чтобы исправить это.