javascript - 如果单击了某个项目(并且之前已经将其添加到数组中)，如何从数组中删除该项目？

Question

如果一个项目被点击(并且它之前已经被添加到一个数组中)，你如何从数组中删除它？

我有一个 Framer X (React) 原型(prototype)，它从 API 中提取足球博彩信息，如下所示:

const API = "https://api.myjson.com/bins/i461t"

// [1]
export const data = Data({
    matches: [],
    chosenBets: [],
})

// [2]
const fetchData = async (endpoint, callback) => {
    const response = await fetch(endpoint)
    const json = await response.json()
    data.matches = json
}

每场比赛都有与之相关的赔率:主队和客队以及平局:

当用户选择赔率时，它会突出显示并添加到 chosenBets 数组中:

export function PopulateMatches(): Override {
    return {
        matches: data.matches,
        onClick(obj, index) {
            data.chosenBets.splice(index, 1, obj)
            console.log(data.chosenBets, "data.chosenBets")
        },
    }
}

当我再次点击相同的赔率时，它被取消选择(红色背景从按钮中移除但数据对象 chosenBets 没有)

如何从 chosenBets 数据对象中删除项目？

代码可以在这里查看:https://github.com/A7DC/FramerXTEST1

编辑:完整代码

import * as React from "react"
import { Data, Override, Stack, Frame } from "framer"
import { MatchCard } from "./canvas"

//// Pulling down mathches

const API = "https://api.myjson.com/bins/i461t"

// [1]
export const data = Data({
    matches: [],
    chosenBets: [],
})

// [2]
const fetchData = async (endpoint, callback) => {
    const response = await fetch(endpoint)
    const json = await response.json()
    data.matches = json
}

// App.tsx
export function PopulateMatches(): Override {
    return {
        matches: data.matches,
        onClick(obj, index) {
            data.chosenBets.splice(index, 1, obj)
            console.log(data.chosenBets, "data.chosenBets")
        },
    }
}

// [4]
fetchData(API, {})

Answer 1

Array.splice()也可用于从数组中删除元素。

data.chosenBets.splice(index, 1); // Deletes the element at specified index.

此外，添加到 chosenBets 数组看起来是错误的。添加时第二个参数应为 0。

data.chosenBets.splice(index, 0, obj); // Adds the element at specified index.

onClick() 函数看起来像

onClick(obj, index) {
  if (data.chosenBets[index]) {
    // Remove object.
    data.chosenBets.splice(index, 1);
  } else {
    // Add object.
    data.chosenBets.splice(index, 0, obj); 
  }
}