Как сохранить список выбранного компонента в массиве в реаги

Question

У меня есть таблица, например, 10 строк, в каждой строке есть выборка.

Как я могу сохранить все выбранные элементы из всех 10 строк в массиве в таком состоянии, чтобы они были похожи на [{id, value}, {id, value}]? ?

и хотите убедиться, что когда я изменяю выбранное значение из одного из параметров, он меняет предыдущее значение в массиве.

моя текущая функция

onSelectGrade(e) {
        const { selectedGrades } = this.state
        let index
        if (e.target.value) {
            let gradeItem = { cid: +e.target.id, id: +e.target.value }
            selectedGrades.push(gradeItem)
        } else {
            index = selectedGrades.indexOf(+e.target.id)
            selectedGrades.splice(index, 1)
        }
        this.setState({ selectedGrades: selectedGrades })
    }

а вот компонент select это строка таблицы

                              <select
                                defaultValue="Default"
                                id={customer.id.toString()}
                                onChange={this.onSelectGrade}
                                className="browser-default custom-select"
                            >
                                <option disabled value="Default">Choose grade</option>
                                {customer.categoryList &&
                                    customer.categoryList.map(cat =>
                                        <option
                                            key={cat.id}
                                            value={cat.id.toString()}>
                                            {cat.name}
                                        </option>
                                    )}
                            </select>

, но он не работает так, как мне нужно ... он хранит массив следующим образом [{"cid": 11, "id": 2 }, {"cid": 11, "id": 3}] но мне нужно вот так [{11, 2}, {11, 3}]

и когда я изменяю опцию, добавленную перед ней добавляет его еще раз

и задерживает клики на 1, это означает, что первый выбор возвращает пустой массив> затем второй возвращаемый массив содержит первый выбор ... и так далее

Пожалуйста, помогите если можешь, спасибо

Answer 1

При установке состояния, особенно с массивом, вам необходимо вернуть новую ссылку на массив , так как реагирует на мелкие проверки на равенство ссылок для проверки необходимости повторного рендеринга.

onSelectGrade(e) {
    const { selectedGrades } = this.state
    let newSelectedGrades;
    let index;
    if (e.target.value) {
        let gradeItem = { cid: +e.target.id, id: +e.target.value }
        // copy previous state and spread into new array with new gradeItem
        newSelectedGrades = [...selectedGrades, gradeItem];
    } else {
        index = selectedGrades.indexOf(+e.target.id)
        // filter previous state if index ins't the one to remove
        newSelectedGrades = selectedGrades.filter((grad, i) => i !== index);
    }
    this.setState({ selectedGrades: newSelectedGrades });
}

Кстати, {11, 2} не является действительным javascript объектом. Но [11, 2] является допустимым объектом массива. Вы можете настроить свой код для хранения массивов вместо объектов.

onSelectGrade(e) {
    const { selectedGrades } = this.state
    let newSelectedGrades;
    let index;
    if (e.target.value) {
        let gradeItem = [ +e.target.id, +e.target.value ];
        // copy previous state and spread into new array with new gradeItem
        newSelectedGrades = [...selectedGrades, gradeItem];
    } else {
        // use array::findIndex since not storing a primitive or object
        index = selectedGrades.findIndex(([, id]) => id === +e.target.id)
        // filter previous state if index ins't the one to remove
        newSelectedGrades = selectedGrades.filter((grad, i) => i !== index);
    }
    this.setState({ selectedGrades: newSelectedGrades });
}