如何在React Final Form中检测值是否已存在？通用实现方法问询

Hey there! Let's walk through how to implement duplicate username detection in React Final Form for your exact scenario. I'll cover both on-blur validation (when the input loses focus) and on-submit checks, plus how to track existing usernames after they're saved to the database.

Core Idea #

First, we need to maintain a list of usernames that have already been submitted and saved. We'll use this list for quick frontend validation, and optionally add a backend check for more robust verification (critical for multi-user environments).

Step 1: Set Up the Basic Form & State #

Let's start with a foundational form setup, including state to track submitted usernames:

import React, { useState } from 'react';
import { Form, Field } from 'react-final-form';

function UsernameForm() {
  // Track usernames that have been saved to the database
  const [existingUsernames, setExistingUsernames] = useState([]);
  // For displaying submitted usernames on the page
  const [displayedUsernames, setDisplayedUsernames] = useState([]);

  // Handle form submission (simulate saving to database)
  const handleSubmit = async (values) => {
    // Simulate an API call to save the username to your database
    await new Promise(resolve => setTimeout(resolve, 500));
    
    // Update our existing usernames list for validation
    const trimmedUsername = values.username.trim();
    setExistingUsernames(prev => [...prev, trimmedUsername]);
    setDisplayedUsernames(prev => [...prev, trimmedUsername]);
    
    // Return empty object to signal success (form will clear automatically)
    return {};
  };

  return (
    <div style={{ maxWidth: '400px', margin: '2rem auto' }}>
      <h2>Add a Username</h2>
      <Form
        onSubmit={handleSubmit}
        render={({ handleSubmit, submitting }) => (
          <form onSubmit={handleSubmit}>
            {/* Username Input Field */}
            <Field name="username">
              {({ input, meta }) => (
                <div style={{ marginBottom: '1rem' }}>
                  <label>Username:</label>
                  <input 
                    {...input} 
                    type="text" 
                    placeholder="Enter username" 
                    style={{ width: '100%', padding: '0.5rem' }}
                  />
                  {/* Show error if touched and invalid */}
                  {meta.error && meta.touched && (
                    <span style={{ color: 'red', fontSize: '0.8rem' }}>
                      {meta.error}
                    </span>
                  )}
                </div>
              )}
            </Field>

            <button 
              type="submit" 
              disabled={submitting}
              style={{ padding: '0.5rem 1rem', cursor: 'pointer' }}
            >
              {submitting ? 'Saving...' : 'Submit'}
            </button>

            {/* Display Submitted Usernames */}
            <div style={{ marginTop: '2rem' }}>
              <h3>Submitted Usernames:</h3>
              <ul style={{ listStyle: 'none', padding: 0 }}>
                {displayedUsernames.map((name, idx) => (
                  <li key={idx} style={{ padding: '0.25rem 0' }}>{name}</li>
                ))}
              </ul>
            </div>
          </form>
        )}
      />
    </div>
  );
}

export default UsernameForm;

Step 2: Add On-Blur Validation (Sync Check) #

To trigger an error when the input loses focus and the username already exists, add a validate function to the Field component. This runs synchronously when the field is touched:

<Field 
  name="username"
  validate={(value) => {
    const trimmedValue = value?.trim();
    if (!trimmedValue) return 'Username is required';
    if (existingUsernames.includes(trimmedValue)) {
      return 'This name already exists';
    }
    return undefined; // No error
  }}
>
  {/* ... existing field content ... */}
</Field>

Now, when the user types "John", tabs away from the input, and "John" is already in the existingUsernames list, the error message will appear immediately.

Step 3: Add On-Submit Validation (Async Backend Check) #

For production, you should always validate against your backend (since frontend state can be out of sync with the database, e.g., another user submitted the same username). Here's how to add an asynchronous submit-time check:

First, create an async function to call your backend API:

const checkUsernameExists = async (username) => {
  // Replace with your actual API endpoint
  const response = await fetch('/api/check-username', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username: username.trim() })
  });
  const data = await response.json();
  return data.exists; // Assume backend returns { exists: boolean }
};

Then, update the Form component to use an async validation function:

<Form
  onSubmit={handleSubmit}
  validate={async (values) => {
    const errors = {};
    const trimmedUsername = values.username?.trim();

    if (!trimmedUsername) {
      errors.username = 'Username is required';
    } else {
      const isDuplicate = await checkUsernameExists(trimmedUsername);
      if (isDuplicate) {
        errors.username = 'This name already exists';
      }
    }

    return errors;
  }}
  render={({ handleSubmit, submitting }) => (
    // ... existing form content ...
  )}
/>

This will run the backend check before saving the username, ensuring you don't save duplicates even if the frontend state is outdated.

Edge Cases to Handle #

• Whitespace: Always trim the username value before validation/saving to avoid duplicates like "John " and "John".
• Real-Time Validation (Optional): If you want to check as the user types, add subscription={{ value: true }} to the Field component. Note this will trigger validation on every keystroke, so use it sparingly to avoid excessive API calls.
• Form Reset: React Final Form automatically resets the form after a successful submission, which aligns with your requirement to clear the input.

内容的提问来源于stack exchange，提问作者Volodymyr Nabok