Svelte 派生商店 returns 不正确的值

Question

我对派生存储有问题，不知何故 returns 即使存储中有 1 条记录，结果也是空的。派生存储依赖于 2 个可写存储：assignedAgentsIds（代理 ID 数组）和 agents（代理实体映射）。如果我在组件中直接使用这两个存储，它工作得很好，但是当我在派生存储中使用它们并尝试组合它们时，我总是得到空数组。

这是我的商店代码：

const createAssignedAgentsStore = () => {
    const assignedAgentIds = writable<string[]>([])
    const { subscribe, set, update } = assignedAgentIds

    const setAssignedAgentIds = (agentIds: string[]) => {
        set(agentIds)
    }

    const addAssignedAgentId = (agentId: string) => {
        update((agentIds) => [...agentIds, agentId])
    }

    return {
        subscribe,
        setAssignedAgentIds,
        addAssignedAgentId,
    }
}

export const assignedAgentIds = createAssignedAgentsStore()

export const assignedAgents = derived([assignedAgentIds, agents], ([$assignedAgentIds, $agents]): Agent[] => {
    const assignedAgentsArr: Agent[] = []

    for (const agentId of $assignedAgentIds) {
        const agent = $agents[agentId]
        if (agent) assignedAgentsArr.push(agent)
    }

    return assignedAgentsArr
})

我尝试在派生存储中调试 $assignedAgentIds 和 $agents，它具有正确的值，如果 assignedAgentsIds 中有 1 个 ID，assignedAgentsIds 中有 1 个具有相同 ID 的记录=14=] 地图，仍然当我在组件中使用 $assignedAgents 存储时，我得到空数组而不是包含 1 个实体的数组。

编辑

在 Svelte 组件中，我有这段代码来显示正确的代理类型，它也在使用 assignedAgents 商店：

let headerAgents: Agent[] = []

$: {
    let agentsArray = Object.values($agents)
    if ($assignedAgents.length > 0) {
        agentsArray = $assignedAgents
    }

    headerAgents = agentsArray.splice(0, 3)
}

Answer 1

代码对我来说很好，所以我只是尝试运行它并且成功了。至少当 agents 商店在正确范围内时。如果不是，它会抛出。

完整示例：

<script>
    import { writable, derived } from 'svelte/store';

    const createAssignedAgentsStore = () => {
        const assignedAgentIds = writable([])
        const { subscribe, set, update } = assignedAgentIds

        const setAssignedAgentIds = (agentIds) => {
            set(agentIds)
        }

        const addAssignedAgentId = (agentId) => {
            update((agentIds) => [...agentIds, agentId])
        }

        return {
            subscribe,
            setAssignedAgentIds,
            addAssignedAgentId,
        }
    }

    const assignedAgentIds = createAssignedAgentsStore()
    const agents = writable({
        0: 'Joe',
        1: 'Jane',
        2: 'Steve',
    });

    const assignedAgents = derived(
        [assignedAgentIds, agents],
        ([$assignedAgentIds, $agents]) => {
            const assignedAgentsArr = []

            for (const agentId of $assignedAgentIds)
            {
                const agent = $agents[agentId]
                if (agent) assignedAgentsArr.push(agent)
            }

            return assignedAgentsArr
        }
    )

    assignedAgentIds.setAssignedAgentIds([1, 2]);
</script>

{#each $assignedAgents as agent}
    <p>{agent}</p>
{/each}

REPL

我怀疑问题出在其他地方。

Answer 2

我在组件中传递对 assignedAgents 商店的引用，并使用 splice 函数改变商店。解决方案是不要使用 slice 函数改变存储。

这是有效的代码：

let headerAgents: Agent[] = []

$: {
    let agentsArray = Object.values($agents)
    if ($assignedAgents.length > 0) {
        agentsArray = $assignedAgents
    }

    headerAgents = agentsArray.slice(0, 3)
}

Svelte 派生商店 returns 不正确的值

Svelte derived store returns incorrect value

svelte

svelte-store

编辑