Как удалить элемент из массива, если на него щелкнули (и если он уже был ранее добавлен в массив)? - PullRequest
Новая
       37

Как удалить элемент из массива, если на него щелкнули (и если он уже был ранее добавлен в массив)?

0 голосов
/ 25 сентября 2019

Как удалить элемент из массива, если на него щелкнули (и если он уже был ранее добавлен в массив)?

У меня есть прототип Framer X (React), который собирает информацию о ставках на футболпо сравнению с 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
}

У каждого матча есть шансы, связанные с ним: для команды хозяев и гостей, а также ничья:

enter image description here

Когда пользователь выбирает нечетное, оно выделяется и добавляется в массив chosenBets: 

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

enter image description here

Когда я снова нажимаю на ту же нечетную, она отменяется (красный фон удаляется с кнопки, но не с объекта данных chosenBets)

enter image description here

Как удалить элемент из объекта данных 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, {})

1 Ответ

2 голосов
/ 25 сентября 2019

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