React Admin中如何对ArrayInput内的输入值求和？

问题分析 #

你当前用单个teamCapacity状态只能存单个输入框的值，没法跟踪所有capacity项，得先拿到整个team_capacities数组的数据，才能计算总和。

方法一：用React-Admin的FormContext获取表单数据（推荐） #

React-Admin的表单组件都在FormContext里，直接拿整个表单的values就能提取数组求和：

1. 先导入FormContext相关钩子：

import { useFormContext } from 'react-hook-form';

2. 在组件里获取并计算总和：

const { watch } = useFormContext();
// 拿到team_capacities数组，空值时默认给空数组
const teamCapacities = watch('team_capacities') || [];
// 遍历数组求和，处理空值/非数字情况
const totalCapacity = teamCapacities.reduce((sum, item) => {
  const capacity = typeof item.capacity === 'number' 
    ? item.capacity 
    : parseInt(item.capacity) || 0;
  return sum + capacity;
}, 0);

3. 直接渲染总和就行，比如放在表单下方：

<div>总容量：{totalCapacity}</div>

这种方法不用改原有Input的逻辑，靠React-Admin自带的表单状态管理，省心又简洁。

方法二：手动维护数组状态（适合自定义场景） #

如果不想依赖FormContext，可以自己管整个team_capacities的状态：

1. 初始化数组状态：

const [teamCapacities, setTeamCapacities] = useState<Array<{team_id: string; capacity: number}>>([]);

2. 给NumberInput绑定带索引的变更事件：
   先从SimpleFormIterator的上下文里拿到当前项的索引：

import { useSimpleFormIteratorContext } from 'react-admin';

// 在NumberInput所在的组件里获取索引
const { index } = useSimpleFormIteratorContext();

// 修改变更处理函数，带上索引
const handleTeamCapacityChange = (index: number, value: string) => {
  const newValue = value === '' ? 0 : parseInt(value) || 0;
  setTeamCapacities(prev => {
    const newArray = [...prev];
    // 更新对应索引项的capacity，没有就新增（根据实际需求调整）
    if (newArray[index]) {
      newArray[index] = {...newArray[index], capacity: newValue};
    } else {
      newArray.push({team_id: '', capacity: newValue});
    }
    return newArray;
  });
};

3. 给NumberInput绑定事件：

<NumberInput
  source="capacity"
  label="Capacité *"
  onChange={(e) => handleTeamCapacityChange(index, e.target.value)}
/>

4. 计算总和：

const totalCapacity = teamCapacities.reduce((sum, item) => sum + item.capacity, 0);

注意点 #

• 一定要处理空值或非数字的情况，比如用parseInt(value) || 0兜底，避免出现NaN导致求和错误。
• 优先用方法一，React-Admin已经帮你维护了表单的数组状态，自己写代码容易冗余出错。

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