React-Admin表单加载相同数据后异常变脏的时序问题求助

Hey there, let’s dig into why your form is getting marked as dirty even when the data looks identical—this is a super common gotcha with React-Admin’s form state management, and I’ve wrestled with similar issues before. Here are the most likely culprits and how to fix them:

1. Shallow Comparison Fails Due to Object Reference Differences #

React-Admin’s form uses shallow comparison to determine if the form is pristine or dirty. That means even if two objects have identical key-value pairs, if they’re different object references (like your cached list record vs. the freshly fetched API record), the form will treat them as distinct and mark itself as dirty.

Fix: Force Reference Consistency or Use Deep Comparison #

You have two solid options here:

• Align the object reference: After fetching the API record, check if it’s identical to the cached list record (using a deep comparison tool like lodash.isEqual). If they match, replace the fetched record with the cached one to keep the reference the same.
• Override the form’s dirty check: Use a deep comparison instead of React-Admin’s default shallow check to determine if the form has actually changed.

Example code for aligning references:

import { Edit, SimpleForm, TextInput } from 'react-admin';
import { useEditController } from 'ra-core';
import isEqual from 'lodash/isEqual';

const MyResourceEdit = () => {
  const { record, isLoading, mutate } = useEditController({ resource: 'yourResource' });
  // Assume you get the cached list record via context/props
  const cachedRecord = useYourCachedRecordHook();

  React.useEffect(() => {
    if (record && cachedRecord && isEqual(record, cachedRecord)) {
      // Replace fetched record with cached one to keep reference consistent
      mutate(cachedRecord, { revalidate: false });
    }
  }, [record, cachedRecord, mutate]);

  if (isLoading) return <div>Loading...</div>;

  return (
    <Edit>
      <SimpleForm>
        <TextInput source="name" />
        {/* Add your other form fields */}
      </SimpleForm>
    </Edit>
  );
};

2. Hidden/Extra Field Discrepancies #

It’s easy to miss subtle differences between the list API response and the single-record API response. For example:

• The list might omit fields like createdAt, updatedAt, or internal backend IDs
• The single-record endpoint might return default values for optional fields that weren’t present in the list cache

Even tiny differences like these will trigger a dirty state, since the form compares all fields (including hidden ones) against the initial values.

Fix: Standardize Data Structures #

• Log both the cached list record and fetched single record to your browser console and compare every key-value pair.
• Adjust your API endpoints to return identical fields for list and single-record requests, or filter the fetched record to match the cached structure before passing it to the form.

Example of filtering extra fields:

// After fetching the API record, keep only the fields present in the cached record
const filteredRecord = Object.fromEntries(
  Object.keys(cachedRecord).map(key => [key, record[key]])
);

3. Data Type or Precision Differences #

Sometimes values look the same but are different under the hood:

• Timestamps: List returns a string ("2024-05-20T12:00:00Z") while the single record returns a Date object
• Numbers: Floats with differing precision (e.g., 1.23 vs. 1.2300000001 due to backend serialization)

Fix: Normalize Data Types #

Convert values to a consistent type before passing them to the form. For example:

// Convert timestamps to strings
const normalizedRecord = {
  ...record,
  createdAt: record.createdAt.toISOString(),
  updatedAt: record.updatedAt.toISOString()
};

// Round floats to a consistent precision
const normalizedRecord = {
  ...record,
  price: Number(record.price.toFixed(2))
};

4. Timing Issues with Initial Value Updates #

Your flow loads the cached record first, then replaces it with the fetched record. React-Admin’s form might interpret this replacement as a user change, even if the values are identical.

Fix: Delay Form Render Until API Data Loads #

Skip rendering the form until the single-record API request completes, so the initial values are set directly from the fetched data (no intermediate cached value). This avoids the "initial value change" that triggers the dirty state.

import { Edit, SimpleForm, TextInput } from 'react-admin';
import { useEditController } from 'ra-core';

const MyResourceEdit = () => {
  const { record, isLoading } = useEditController({ resource: 'yourResource' });

  if (isLoading) return <div>Loading...</div>;

  // Form renders only after API data is ready, using it as the single initial value
  return (
    <Edit>
      <SimpleForm defaultValues={record}>
        <TextInput source="name" />
        {/* Your other fields */}
      </SimpleForm>
    </Edit>
  );
};

Start by debugging the data itself—log both records and check for any discrepancies. That’s usually where the issue hides. Once you rule out actual data differences, the reference or timing fixes should resolve the false dirty state.

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