Javascript 如何删除已单击的元素，而不是删除除已单击项目之外的所有项目？

这来自react本机教程->

该应用程序用于记录您的“课程目标”。这基本上只是一张待办事项清单。您可以添加和删除目标

为了让我的头脑清醒过来，我想我应该试着自己做“删除”代码。我想知道如何使我的方法有效：

export default function App() {
      const [courseGoals, setCourseGoals] = useState([]);

      function addGoalHandler(goalTitle) {
        setCourseGoals([goalTitle, ...courseGoals]);
      }

      function removeGoalHandler(index) {
        console.log(index)
        setCourseGoals(courseGoals.splice(index, 1));
      }

      return (
        <View style={styles.screen}>

          <GoalInput onAddGoal={addGoalHandler}/>

          <ScrollView>
            {courseGoals.map((goal, index) => <GoalItem onDelete={() => removeGoalHandler(index)} title={goal} key={index}/>)}
          </ScrollView>


        </View>
      );
    }

导出默认函数App（）{
const[courseGoals，setCourseGoals]=useState（[]）；
函数addGoalHandler（goalTitle）{
setCourseGoals（[goalTitle，…courseGoals]）；
}
函数removeGoalHandler（索引）{
console.log（索引）
setCourseGoals（courseGoals.拼接（索引1））；
}
返回(
{courseGoals.map（（目标，索引）=>removeGoalHandler（索引）}title={goal}key={index}/>）}
);
}

---

我认为第10行的情况是

courseGoals

数组将设置为

courseGoals

减去拼接元素。相反，我发现splice实际上返回已删除的项。我怎样才能解决这个问题？是否无法仅获取

courseGoals.splice（）

以返回不带拼接元素的数组？

您可以使用

切片来执行此操作：

函数removeGoalHandler（索引）{
控制台日志（索引）；
setCourseGoals（[…courseGoals.slice（0，索引），…courseGoals.slice（索引+1）]；
}

或使用
拼接
：

函数removeGoalHandler（索引）{
控制台日志（索引）；
const courseGoalsCopy=[…courseGoals]；
courseGoalsCopy.拼接（索引1）；
setCourseGoals（courseGoalsCopy）；
}
splice
修改在其上使用的阵列。首先制作副本，然后拼接副本，然后将状态设置为副本。