React управляет многомерным массивом по его индексу

Question

У меня проблема с тем, как обновить (в этом случае Add или Remove Car go) мой многомерный массив на основе выбранного индекса. Родительский массив был успешным, но я запутался, когда ребенок нажимал кнопку «Добавить автомобиль go», чтобы добавить автомобиль go, и кнопку «Удалить автомобиль go», чтобы удалить все автомобили на основе go. по выбранному индексу.

Пожалуйста, помогите. Это мои коды и код коробки

Извините за мнение, может быть, недостаточно хорошо

Answer 1

Вам нужно будет предоставить указатель на функции для добавления и / или удаления грузов. В функции обновите вложенные поля, сопоставив их с inputFields. При вызове handleAddCargo, передайте index и при вызове handleRemoveCargo, передайте index, а также finalIndex, который является индексом go массива автомобиля.

const handleAddCargo = (parentFiledIndex) => {
        const updatedInputFields = inputFields.map((item, i) => {
            if(parentFiledIndex === i){
                return {...item, cargo: item.cargo.concat({
                        cargoId: '',
                        cargoDescription: "",
                        cargoHsCode: ""
                    })}
            }else{
                return item
            }
        });
        setInputFields(updatedInputFields);
        console.log("add by its index cargo here");
    };

    const handleRemoveCargo = (parentFiledIndex, cargoIndex) => {
        const updatedInputFields = inputFields.map((item, i) => {
            if(parentFiledIndex === i){
                return {...item, cargo: item.cargo.filter((cargo, c) => c !== cargoIndex)}
            }else{
                return item
            }
        });
        setInputFields(updatedInputFields);
        console.log("remove by its index cargo here");
    };

updated рабочее решение здесь

https://codesandbox.io/s/reverent-bose-c2nkk

краткое примечание -

• старайтесь не использовать индексы массива при рендеринге списков. Например, используйте некоторую библиотеку для генерации уникального идентификатора