Svelte开发Amazon Turk任务：任务切换失效，多任务同页显示问题

问题根源 #

你用Array(numberOfTasks).fill({show: false})创建tasks数组时，fill方法会把同一个对象引用填充到数组的每个位置。这意味着数组里的所有task其实都是同一个对象——初始设置tasks[0].show = true时，所有task的show属性都会同步变成true，导致所有Task组件同时显示在页面上。

解决方案 #

1. 修正tasks数组的初始化方式

把数组初始化代码改成以下任意一种，确保每个数组元素都是独立的对象：

方式一（推荐）：用Array.from创建独立对象

let tasks = Array.from({length: numberOfTasks}, () => ({show: false}));

方式二：用循环逐个创建对象

let tasks = [];
for (let i = 0; i < numberOfTasks; i++) {
    tasks.push({show: false});
}

2. 验证逻辑（无需修改原函数）

你的nextTask函数逻辑本身是正确的，修正数组初始化后，修改单个task.show属性只会影响对应的组件：

function nextTask(currentIndex: number){
    tasks[currentIndex].show = false;
    if (currentIndex < numberOfTasks - 1){
        tasks[currentIndex+1].show = true;
    }
}

修改后的完整App.svelte脚本部分 #

<script lang="ts">
    import Captcha from "./components/Captcha.svelte";
    import ExampleGuidelines from "./components/ExampleGuidelines.svelte"
    import TrainingGuidelines from "./components/TrainingGuidelines.svelte"
    import TaskGuidelines from "./components/TaskGuidelines.svelte"
    import Consent from "./components/Consent.svelte";
    import Example from "./components/Example.svelte";
    import Training from "./components/Training.svelte";
    import Task from "./components/Task.svelte";

    let notRobot = false;
    let consentChecked = false;
    let showExample = true;
    let showTraining = true;
    let showTasks = false;
    const numberOfTasks = 10;
    let showNextTask = true;
    const imageDir = `https://raw.githubusercontent.com/lieldvd/mturk/main/15545`;
    // 修正：每个元素都是独立对象
    let tasks = Array.from({length: numberOfTasks}, () => ({show: false}));
    tasks[0].show = true; 

    function nextTask(currentIndex: number){
        tasks[currentIndex].show = false;
        if (currentIndex < numberOfTasks - 1){
            tasks[currentIndex+1].show = true;
        }
    }
    function startTraining(){
        showTraining = true
        showExample = false
    }
    function startTasks(){
        showTasks = true;
        showTraining = false;
    }
</script>

完成上述修改后，点击Task组件的"Next"按钮，就会隐藏当前任务并显示下一个，实现逐个切换的预期效果。

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