Svelte 派生存储和数组排序答案

【问题标题】：Svelte derived stores and array sortSvelte 派生存储和数组排序
【发布时间】：2019-11-27 18:28:47
【问题描述】：

我设置了一个商店，其中包含从我的 API 加载的游乐设施列表：

const loadRides = () => client.service('rides').find({
  query: {
    $sort: {
      date: -1,
    }
  }
});

const createRides = () => {
  const { subscribe, update } = writable([], async (set) => {
    try {
      const rides = await loadRides().then((result) => result.data);
      set(rides);
    } catch (e) {
      console.error(e);
    }
    // Socket update binding?
  });

  subscribe((rides) => console.debug('rides', rides));

  return {
    subscribe,
    refresh: () => loadRides().then((result) => update(() => result.data)),
  };
};
export const rides = createRides();

然后我为过去和未来的游乐设施设置了两个派生商店：

export const pastRides = derived(
  rides,
  ($rides) => $rides
    .filter((ride) => ride.steps.every((step) => step.doneAt))
  ,
);
export const comingRides = derived(
  rides,
  ($rides) => $rides
    .filter((ride) => ride.steps.some((step) => !step.doneAt))
    .sort((rideA, rideB) => {
      const compare = new Date(rideA.date) - new Date(rideB.date);
      console.log(rideA.date, rideB.date, compare);
      return compare;
    })
  ,
);

第二个上的sort方法没有任何作用。

所以我试着把这个方法放在filter 之前。它有效，但它也对$pastRides 进行排序。事实上，它正在对完整的$rides 数组进行排序，这很有意义。

但我不明白为什么filter 之后的sort 不起作用。

我错过了什么？

【问题讨论】：

如果没有看到最小的可重现示例就很难说，但它可能与sort 改变数组有关吗？您可以尝试 $rides.slice() 创建数组的浅表副本，然后再在派生中执行任何其他操作，看看是否有帮助。

标签： javascript svelte svelte-3 svelte-store

【解决方案1】：

Array.sort 是可变的。也就是说，当你调用rides.sort时，它会对rides进行排序和修改，并返回排序后的rides。

当您使用derived(rides, ($rides) => ... ) 时，您收到的$rides 是您调用set(rides) 的原始rides 数组。所以你可以想象pastRides 和comingRides 都收到了相同的$rides 数组。

您可以在this repl 中观察到这种行为

为了不让derived 互相干扰，您可以创建一个新数组并对新数组进行排序：

const sorted_1 = derived(array, $a => [...$a].sort());

你可以在this repl试试这个。

【讨论】：