如何将两个对应数组的值映射为指定结构的对象数组？

核心问题修正 #

你的初始状态设置为单个对象，但实际需要的是对象数组，这是导致后续操作出错的核心原因。另外不需要拆分两个函数分别填充属性，一次性遍历生成完整对象更高效可靠。

正确实现步骤 #

1. 修正状态初始化 #

将状态改为数组类型，初始值设为空数组（变量名改为objects更贴合数组语义）：

const [objects, setObjects] = React.useState([]);

2. 生成完整对象数组 #

编写一个函数，通过map遍历数组，同时获取对应索引的两个数组元素，生成包含所有所需属性的对象：

function generateWordObjects() {
  const newObjects = word.map((item, index) => ({
    value: item,
    translation: translatedWord[index],
    id: nanoid(),
    isFavorite: false
  }));
  setObjects(newObjects);
}

3. 触发生成逻辑 #

可以在组件挂载时自动调用该函数，比如使用useEffect：

React.useEffect(() => {
  generateWordObjects();
}, []); // 空依赖数组确保只执行一次

原有方法的问题说明 #

• 初始状态是单个对象，调用map方法会直接报错，因为map是数组专属方法。
• 拆分两个函数填充属性会增加逻辑复杂度，且容易出现索引不匹配的问题，一次性遍历生成更稳妥。
• map方法本身会提供第二个参数index，可以直接用它获取另一个数组对应位置的元素，无需手动维护索引变量。

最终效果 #

调用函数后，objects状态会生成你期望的结构：

[
  { value: 'table', translation: 'masa', id: '生成的唯一ID', isFavorite: false },
  { value: 'chair', translation: 'scaun', id: '生成的唯一ID', isFavorite: false },
  { value: 'bottle', translation: 'sticla', id: '生成的唯一ID', isFavorite: false }
]

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