Как я могу удалить элемент, по которому щелкнули, вместо удаления всех элементов, кроме элемента, по которому щелкнули?

Question

Это из оригинального учебного пособия -> 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);
}