Validation Redux表单：尽管已预先填充值，但字段未通过验证

我有一个名为

UpdateForm

的表单，其中包含一些字段：

• 头衔
• 网址
• 标签

表单字段已经预先填充了值，用户可以根据自己的意愿进行更改和更新

但需要注意的是，当您打开

UpdateForm

屏幕并在不更改任何字段的情况下按“Update”时，在打开屏幕时最初接触的字段不会通过验证，尽管其值应允许其通过验证

在上面的示例中，当我打开屏幕时，首先触摸“标签”字段，然后当我按下“更新”时，标签字段接收到验证错误

让它通过验证的唯一方法是从输入字段中单击

UpdateForm.js

：

return (
      <View style={formContainer}>
        <View style={headerContainer}>
          <Text style={headerText}>Update Bookmark</Text>
        </View>
        <View style={inputContainer}>
          <Field name="title" label="Title" component={Input} val={title} />
          <Field name="url" label="URL" component={Input} val={url} />
          <Field name="tags" label="Tags" component={Input} val={tagsString} />
          <View style={buttonContainer}>
            <Button color="#007aff" onPress={ this.props.handleSubmit(this.onSubmit.bind(this))}>Update</Button>
          </View>
        </View>
      </View>
    );

function validate(values) {
  const errors = {};

  const URL_REGEX = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9]\.[^\s]{2,})/;

  if (!values.title) {
    errors.title = "Please provide a title";
  }

  if (!values.url || !URL_REGEX.test(values.url)) {
    errors.url = "Please provide a valid URL";
  }

  if (!values.tags) {
    errors.tags = "Please provide some tags separated by commas";
  }

  return errors;
}

UpdateForm = reduxForm({
  form: 'updateForm',
  validate
})(UpdateForm);

tldr第一次触摸的输入字段未通过验证，尽管已触摸并具有要通过验证的预填充值。需要在输入字段通过验证之前单击它。如何修复

编辑：

我目前将初始值传递给字段输入的方式相当复杂

顶层我有一个

BookmarkList

组件，它从远程API服务器获取所有书签。每个书签都有自己的标题、URL和标签值

标题

，

URL

和

标记

值从

书签列表

传递到

书签详细信息

，从而呈现每个书签：

class BookmarkList extends Component {
  static navigationOptions = {
    title: 'My Bookmarks'
  };

  constructor(props) {
    super(props);
    this.props.fetchBookmarkList();
  }

  renderBookmarks() {
    return this.props.bookmarks.map(bookmark =>
      <BookmarkDetail key={bookmark.title} bookmark={bookmark} />
    );
  }

  render() {
    return (
      <ScrollView>
        {this.renderBookmarks()}
      </ScrollView>
    );
  }
}

然后在

UpdateForm

中，我使用

navigation.getParam

获取这些初始值，然后在输入字段中设置它们：

const { navigation } = this.props;
    const _id = navigation.getParam('_id', 'NO-ID');
    const title = navigation.getParam('title', 'NO-TITLE');
    const url = navigation.getParam('url', 'NO-URL');
    const tags = navigation.getParam('tags', 'NO-TAGS');
    const tagsString = tags.join(", ");

---

如何将初始状态传递给表单字段？我将它们作为道具传递给组件，然后通过

this.props.navigation.navigate

推送它们。检查我的最新编辑使用

redux表单的错误方式

字段

<Button color='#007aff' onPress={() => this.props.navigation.navigate('UpdateBookmark', {
              _id: _id,
              title: title,
              url: url,
              tags: tags
            })}>
              Update
            </Button>

const { navigation } = this.props;
    const _id = navigation.getParam('_id', 'NO-ID');
    const title = navigation.getParam('title', 'NO-TITLE');
    const url = navigation.getParam('url', 'NO-URL');
    const tags = navigation.getParam('tags', 'NO-TAGS');
    const tagsString = tags.join(", ");