ReactJs中如何根据另一数组修改对象数组的属性值？

核心数组合并逻辑 #

你的需求是将array2对应项的uName、uAge字段值，覆盖array1同位置项的name、age字段。如果两个数组按下标顺序一一对应，直接用map遍历即可生成符合要求的新数组，不会修改原数组：

const mergedArray = array1.map((originItem, index) => {
  const matchItem = array2[index];
  // 兼容array2长度不足的边界情况
  if (!matchItem) return originItem;
  return {
    ...originItem, // 保留array1原有字段
    name: matchItem.uName,
    age: matchItem.uAge,
    // 如需使用array2的其他字段（如地址、编号），可直接在此处扩展
    // address: matchItem.uAddress,
    // num: matchItem.uNum
  };
});

如果两个数组不是按下标匹配，而是通过共同的关联字段（如用户ID）对应，只需要把匹配逻辑替换为const matchItem = array2.find(item => item.关联字段名 === originItem.关联字段名)即可。

React 结合接口请求的完整实现 #

由于array2是接口异步获取的数据，用React函数组件+Hooks实现的完整流程如下：

import { useState, useEffect } from 'react';

// 静态基础数组array1，可直接定义在组件外部
const array1 = [
  { name: "abc", age: "123" },
  { name: "bcd", age: "456" },
];

export default function UserRenderComponent() {
  // 存储接口返回的array2数据、加载状态
  const [array2, setArray2] = useState([]);
  const [loading, setLoading] = useState(false);

  // 组件挂载时请求接口获取array2
  useEffect(() => {
    const getApiData = async () => {
      setLoading(true);
      try {
        // 替换为实际的接口请求逻辑
        const res = await fetch('你的接口地址');
        const apiData = await res.json();
        setArray2(apiData);
      } catch (err) {
        console.error('接口请求异常:', err);
      } finally {
        setLoading(false);
      }
    };
    getApiData();
  }, []);

  // 接口数据返回后自动计算合并后的数组，无需额外存为状态，减少冗余
  const displayList = array1.map((originItem, index) => {
    const matchItem = array2[index];
    return matchItem 
      ? { ...originItem, name: matchItem.uName, age: matchItem.uAge, address: matchItem.uAddress }
      : originItem;
  });

  // 加载态兜底
  if (loading) return <div>数据加载中...</div>;

  // 遍历合并后的数据渲染对应组件
  return (
    <div className="list-container">
      {displayList.map((user, idx) => (
        <div className="user-card" key={idx}>
          <p>姓名：{user.name}</p>
          <p>年龄：{user.age}</p>
          <p>地址：{user.address}</p>
        </div>
      ))}
    </div>
  );
}

注意事项 #

• 始终通过生成新数组的方式处理数据，不要直接修改原数组或者接口返回的原始状态，避免React无法检测到状态变化导致页面不更新
• 合并后的展示列表不需要单独存为state，在渲染阶段随依赖自动计算即可，减少状态同步成本
• 列表渲染时需要给每一项加唯一的key属性，如果数据中有唯一标识（如用户ID）优先用ID作为key，无唯一标识时可暂时使用索引

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