javascript - React 通过索引管理多维数组

Question

我有一个问题，如何根据所选索引更新(在本例中添加或删除 cargo )我的多维数组。父数组已成功，但我对子数组感到困惑，当单击“添加 cargo ”按钮添加 cargo 和“删除 cargo ”按钮根据所选索引删除所有 cargo 时，子节点如何处理数据。

请帮忙。这是我的codesandbox code

抱歉， View 可能不够好

Answer 1

您需要提供添加和/或删除 cargo 的功能的索引。在函数中，通过映射 inputFields 来更新嵌套字段。在调用 handleAddCargo 时，传递 index；在调用 handleRemoveCargo 时，传递 index 以及 FinalIndex 这是 cargo 数组索引。

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

更新的工作解决方案在这里

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

快速说明 -

• 渲染列表时尽量不要使用数组索引。例如，使用一些库来生成唯一的 id