React+TypeScript中函数内部与调用处输出不一致问题排查

核心问题很明确：getUsers函数内部打印的是数组listUsers本身，但函数的返回值是包含该数组的对象，这直接导致了两处控制台输出结构不一致。

还原问题代码场景 #

interface SysUser {
  id: number;
  name: string;
}

// 存在问题的代码
const getUsers = () => {
  const listUsers: SysUser[] = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' }
  ];
  console.log(listUsers); // 输出：[{...}, {...}]（纯数组）
  return { listUsers }; // 返回：{ listUsers: [{...}, {...}] }（包含数组的对象）
};

const showUsers = () => {
  const result = getUsers();
  console.log(result); // 输出：{ listUsers: [{...}, {...}] }（对象）
};

两种解决思路 #

思路1：让getUsers直接返回数组

修改函数返回值，去掉包装数组的对象，直接返回数组本身，这样showUsers拿到的返回值和getUsers内部打印的内容一致：

const getUsers = () => {
  const listUsers: SysUser[] = [/* 用户数据 */];
  console.log(listUsers);
  return listUsers; // 直接返回数组
};

思路2：让showUsers打印返回对象中的数组

如果需要保留getUsers返回对象的结构，就在showUsers中明确打印对象里的listUsers属性：

const showUsers = () => {
  const result = getUsers();
  console.log(result.listUsers); // 打印对象中的数组，和getUsers内部输出一致
};

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