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

Question

这是来自 react native 教程 -> https://www.youtube.com/watch?v=qSRrxpdMpVc

该应用程序用于记录您的“课程目标”。它基本上只是一个 ToDo 列表。您可以添加和删除目标。

为了解决这个问题，我想自己尝试执行“删除”代码。我想知道如何使我的方法起作用：

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>
      );
    }

我认为在第 10 行会发生的是 courseGoals 数组将设置为 courseGoals 减去拼接元素。相反，我发现 splice 实际上返回了已删除的项目。我怎样才能解决这个问题？有没有办法让courseGoals.splice()返回没有拼接元素的数组？

Answer 1

您可以使用slice：

function removeGoalHandler(index) {
  console.log(index);
  setCourseGoals([...courseGoals.slice(0, index), ...courseGoals.slice(index + 1)]);
}

或splice:

function removeGoalHandler(index) {
  console.log(index);
  const courseGoalsCopy = [...courseGoals];
  courseGoalsCopy.splice(index, 1);
  setCourseGoals(courseGoalsCopy);
}