React Native中如何将独立文件对象插入另一文件数组元素

1. 把动作列表合并到对应肌肉分类 #

先在NewWorkoutList.js里导入需要的动作列表，比如腹肌的abList：

import { abList } from './AbsExerciseList';
// 其他肌肉群的动作列表（比如胸、背）也按同样方式导入

不要直接在useState里硬塞数据，先处理好完整的分类结构再初始化状态：

// 先写好基础的肌肉分类框架
const baseMuscleCategories = [
  {
    id: '1',
    label: 'Abs',
    subOptions: []
  },
  {
    id: '2',
    label: 'Chest',
    subOptions: []
  },
  // 其他肌肉分类依次添加...
];

// 把动作列表合并到对应分类里
const mergedCategories = baseMuscleCategories.map(category => {
  switch(category.id) {
    case '1':
      // 把abList加到Abs分类的subOptions里
      return { ...category, subOptions: [...category.subOptions, ...abList] };
    case '2':
      // 对应胸肌的动作列表，比如chestList，按同样逻辑合并
      // return { ...category, subOptions: [...category.subOptions, ...chestList] };
    // 其他分类照这个模式添加
    default:
      return category;
  }
});

// 用合并好的数据初始化state
const [muscleCategories, setMuscleCategories] = useState(mergedCategories);

这样腹肌的动作就全部加到Abs分类的可选列表里了，其他肌肉群照这个switch逻辑套就行。

2. 解决"unique key prop"警告 #

这个警告就是你用map渲染列表时，每个子元素没加唯一标识。只要渲染动作列表或者肌肉分类时，给每个元素加key属性就行：
比如渲染单个动作的代码：

{category.subOptions.map(exercise => (
  <div key={exercise.id}> {/* 用每个动作自身的唯一id当key，没有id的话用唯一的名称也可以 */}
    {exercise.name}
  </div>
))}

注意：别用数组索引当key，列表增删改的时候索引会变，容易导致React渲染出错，一定要用每个元素自带的唯一标识。

3. 要不要额外Hook或独立函数？ #

如果只是初始化时合并数据，上面的写法足够，不需要额外Hook。要是后续需要动态添加动作（比如用户自定义动作），可以把合并逻辑抽成独立函数：

// 抽出来的通用合并函数
const mergeExerciseList = (categories, newList, targetId) => {
  return categories.map(category => {
    if(category.id === targetId) {
      return { ...category, subOptions: [...category.subOptions, ...newList] };
    }
    return category;
  });
};

// 比如后续要加新的腹肌动作时调用
const addNewAbsExercises = (newAbsList) => {
  setMuscleCategories(prev => mergeExerciseList(prev, newAbsList, '1'));
};

只有当动作列表是异步获取的（比如从API拉数据），才需要用useEffect来处理合并逻辑。

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