React-Admin：在Edit页面获取ArrayInput元素的原始值

以下是两种优雅的实现方案，均无需直接操作react-hook-form状态：

方案一：原始记录上下文 + 输入上下文（推荐） #

利用React Admin提供的useEditContext获取页面原始记录，结合useInputContext拿到当前输入的完整数据源路径，通过路径提取对应原始值。

import { createContext, useContext } from 'react';
import { Edit, SimpleForm, ArrayInput, SimpleFormIterator, TextInput, useEditContext, useInputContext } from 'react-admin';

// 创建上下文传递原始记录
const OriginalRecordContext = createContext(null);

const MyInput = ({ source, ...rest }) => {
  const originalRecord = useContext(OriginalRecordContext);
  const { source: fullSource } = useInputContext(); // 获取完整路径，如"rules.0.text"

  // 自定义嵌套属性取值函数（替代lodash.get）
  const getNestedValue = (obj, path) => {
    return path.split('.').reduce((acc, key) => acc?.[key], obj);
  };

  const origValue = getNestedValue(originalRecord, fullSource);

  return (
    <TextInput 
      source={source} 
      helperText={`Value was: ${origValue}`} 
      {...rest} 
    />
  );
};

export const MyEdit = () => {
  const { record } = useEditContext(); // 获取Edit页面的原始记录

  return (
    <OriginalRecordContext.Provider value={record}>
      <Edit>
        <SimpleForm>
          <ArrayInput source="rules" label="Rules">
            <SimpleFormIterator>
              <MyInput source="text" />
            </SimpleFormIterator>
          </ArrayInput>
        </SimpleForm>
      </Edit>
    </OriginalRecordContext.Provider>
  );
};

方案二：利用react-hook-form原始值API（轻量实现） #

如果不介意间接读取react-hook-form的原始值（仅读取不修改状态），可以通过useFormContext获取表单实例，调用getRawValues获取所有原始值后提取目标值。

import { Edit, SimpleForm, ArrayInput, SimpleFormIterator, TextInput, useInputContext, useFormContext } from 'react-admin';

const MyInput = ({ source, ...rest }) => {
  const { source: fullSource } = useInputContext();
  const { form } = useFormContext();

  // 自定义嵌套属性取值函数
  const getNestedValue = (obj, path) => {
    return path.split('.').reduce((acc, key) => acc?.[key], obj);
  };

  const origValue = getNestedValue(form.getRawValues(), fullSource);

  return (
    <TextInput 
      source={source} 
      helperText={`Value was: ${origValue}`} 
      {...rest} 
    />
  );
};

export const MyEdit = () => {
  return (
    <Edit>
      <SimpleForm>
        <ArrayInput source="rules" label="Rules">
          <SimpleFormIterator>
            <MyInput source="text" />
          </SimpleFormIterator>
        </ArrayInput>
      </SimpleForm>
    </Edit>
  );
};

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