Question

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

该应用程序用于记录您的“课程目标”是什么。它基本上只是一个待办事项清单。您可以添加目标并删除它们。

为了尝试解决这个问题，我想自己尝试自己做“删除”代码。我想知道如何使我的方法有效：

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减去拼接元素。相反，我发现接合实际上返回了已删除的项目。我怎样才能解决这个问题？有没有办法让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);
}

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

1 个答案: