React 通过其索引管理数组多维

Question

我有一个问题，如何根据所选索引更新（在本例中为添加或删除货物）我的多维数组。父数组已经成功，但是我很困惑孩子如何处理数据，当单击 Add Cargo 按钮添加货物和 Remove Cargo 按钮根据所选索引删除所有货物时。

请帮忙。这是我的codesandbox code

对不起，可能不够好

Answer 1

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

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