如何优化React受控组件表单的「放弃更改」重置初始值逻辑？

Great question! Managing form state with multiple separate variables can quickly feel clunky, especially when your initial values come from an API call. Let's walk through a few cleaner, more maintainable approaches to implement the "discard changes" feature without needing three distinct state variables.

1. Use a Ref to Store Initial (and Saved) Form Values #

The key insight here is that your "baseline" form values (initial from API, or updated after save) don't need to be in React state—since they only change when the form loads or submits, a useRef is perfect for storing them. We can then calculate whether the form is "dirty" dynamically by comparing the current formData state to the ref's value.

Here's how this looks in code:

import { useState, useEffect, useRef, useMemo } from 'react';

function SettingsForm() {
  const [formData, setFormData] = useState({});
  // Store initial/saved values in a ref (doesn't trigger re-renders)
  const baselineFormRef = useRef({});

  useEffect(() => {
    const fetchSettings = async () => {
      const response = await fetch('/settings-data');
      const settingsData = await response.json();
      
      setFormData(settingsData);
      baselineFormRef.current = settingsData; // Initialize baseline
    };
    
    fetchSettings();
  }, []);

  // Calculate isDirty dynamically instead of using state
  const isDirty = useMemo(() => {
    // For simple objects, JSON.stringify works—use deep equality for complex data
    return JSON.stringify(formData) !== JSON.stringify(baselineFormRef.current);
  }, [formData]);

  const handleChange = (value, id) => {
    setFormData(prev => ({ ...prev, [id]: value }));
    // No need to set isDirty here—it's calculated automatically
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    await fetch("/settings-data", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(formData),
    });
    
    // Update the baseline ref to the newly saved values
    baselineFormRef.current = formData;
  };

  const handleDiscard = () => {
    // Reset form to the baseline values
    setFormData(baselineFormRef.current);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Example field—adjust to match your form structure */}
      <input
        type="text"
        value={formData.username || ''}
        onChange={(e) => handleChange(e.target.value, 'username')}
      />

      {/* Only show "Discard" if form is dirty */}
      {isDirty && (
        <button type="button" onClick={handleDiscard}>放弃更改</button>
      )}
      <button type="submit">保存设置</button>
    </form>
  );
}

Why this works: #

• baselineFormRef holds the last "clean" version of the form (initial from API, or after a successful save) without triggering re-renders when updated.
• isDirty is computed with useMemo so it only recalculates when formData changes, avoiding unnecessary computations on every render.
• We eliminate two state variables (currentFormData and isDirty) entirely, simplifying the component's state management.

2. Deep Equality for Complex Form Data #

If your formData includes complex values like dates, arrays, or nested objects, JSON.stringify might not work reliably (it can lose type information or order). In this case, use a deep equality check instead. You can write your own utility function or use a trusted library like Lodash's isEqual:

import { isEqual } from 'lodash';
// ...

const isDirty = useMemo(() => {
  return !isEqual(formData, baselineFormRef.current);
}, [formData]);

This ensures accurate comparisons even for non-primitive data types.

3. Optional: Single State Object (For Centralized Control) #

If you prefer keeping all form-related state in one place (instead of using a ref), you can combine formData and baselineData into a single state object. This is slightly more verbose but keeps state grouped:

import { useState, useEffect, useMemo } from 'react';
import { isEqual } from 'lodash';

function SettingsForm() {
  const [formState, setFormState] = useState({
    data: {},
    baseline: {}
  });

  useEffect(() => {
    const fetchSettings = async () => {
      const response = await fetch('/settings-data');
      const settingsData = await response.json();
      
      setFormState({
        data: settingsData,
        baseline: settingsData
      });
    };
    
    fetchSettings();
  }, []);

  const isDirty = useMemo(() => {
    return !isEqual(formState.data, formState.baseline);
  }, [formState]);

  const handleChange = (value, id) => {
    setFormState(prev => ({
      ...prev,
      data: { ...prev.data, [id]: value }
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    await fetch("/settings-data", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(formState.data),
    });
    
    setFormState(prev => ({
      ...prev,
      baseline: prev.data
    }));
  };

  const handleDiscard = () => {
    setFormState(prev => ({
      ...prev,
      data: prev.baseline
    }));
  };

  // Render logic remains similar to the ref example...
}

This approach works, but the ref method is generally more performant since refs don't trigger re-renders when updated.

Final Notes #

All these approaches reduce state bloat and make your component's logic more straightforward. The ref-based method is my go-to because it keeps state minimal and avoids unnecessary re-renders.

内容的提问来源于stack exchange，提问作者justin henricks