React中如何用.reduce将当前登录用户置于数组首位

使用reduce方法实现 #

你可以通过reduce把数组拆分为「登录用户条目」和「其他条目」两个分组，最后合并时把登录用户的组放在前面：

import { useStoreState } from '你的store库'; // 比如mobx-react、recoil等

function YourComponent() {
  // 获取当前登录用户ID
  const { user: currentUserId } = useStoreState(({ AccountModel }) => AccountModel);

  const originalArray = [
    {details: "", user: {id: "123456", name: "John Doe"} },
    {details: "", user: {id: "344333", name: "Bob Doe"} },
    {details: "", user: {id: "233334", name: "Jane Doe"} }
  ];

  // 用reduce分组并重组数组
  const sortedArray = originalArray.reduce((acc, item) => {
    if (item.user.id === currentUserId) {
      acc[0].push(item);
    } else {
      acc[1].push(item);
    }
    return acc;
  }, [[], []]) // 初始化累加器：第一个数组存登录用户，第二个存其他
  .flat(); // 把二维数组展开为一维

  return (
    // 你的组件渲染逻辑
  );
}

reduce的思路说明

• 初始化累加器为[[], []]，第一个空数组专门存放登录用户的条目，第二个存放其余条目
• 遍历原始数组的每一项，判断当前项的user.id是否和登录用户ID匹配
• 匹配的项推入第一个数组，不匹配的推入第二个数组
• 最后用flat()把两个数组合并成一个一维数组，登录用户的条目自然排在最前面

更简洁的sort方法实现 #

如果不需要额外分组逻辑，直接用数组的sort方法更直观：

const sortedArray = [...originalArray].sort((a, b) => {
  if (a.user.id === currentUserId) return -1; // 当前用户条目排前面
  if (b.user.id === currentUserId) return 1; // 对方是当前用户，当前项排后面
  return 0; // 其他条目保持原顺序
});

注意事项

• 用[...originalArray]创建原数组的副本，避免直接修改原数组（React中应遵循状态不可变原则）
• 如果需要避免每次组件渲染都重新排序，可以用useMemo缓存结果：

import { useMemo } from 'react';

const sortedArray = useMemo(() => {
  return [...originalArray].sort((a, b) => {
    if (a.user.id === currentUserId) return -1;
    if (b.user.id === currentUserId) return 1;
    return 0;
  });
}, [originalArray, currentUserId]);

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