TypeScript中

问题描述

我第一次从redux-form实现FieldArray，并且UI正常工作（尽管似乎我还没有诊断出一些一般的性能含义）。想法是，您单击添加按钮将另一个“房间”添加到表单中，这只是一个文本字段（忽略按钮组件，它是一个自定义组件）

但是验证代码无法编译。似乎我在类型上发生冲突，不确定在打字稿中使用正确的方法。我正在使用this example的指南进行验证，但是该示例是纯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>)> | undefined'.

以下是呈现字段数组的方法：

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 && fieldProps.Meta.error && <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 && 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 && roomNameErrors.length > 0) {
        errors.roomNames = roomNameErrors;
      }
    }
  }

  return errors;
};

问题出在编译时。它不喜欢_error: 部分，它需要一个直的字符串。

但是，如果将roomNameErrors保留为字符串数组，则也不允许行errors.roomNames = roomNameErrors;。而是导致此错误：

Type 'string[]' is not assignable to type 'string | ReactElement<any,any>)> | undefined'.

看来，即使我模型上的'roomNames'属性是一个字符串数组，对此的类型定义也只需要react组件或字符串。如何使用打字稿回传针对字段数组中给定字段的验证失败？前面链接的示例仅在当前设置时不传递打字稿键入。

使用redux-form 8.2。

解决方法

我发现类型定义确实是错误的。 通过将错误从FormErrors切换为类型Any，所有错误均已编译并且可以正常工作。我将用绝对类型的仓库记录一个问题来解决此问题。