根据反应状态下数组的名称键将新对象添加到嵌套的对象数组中

Question

我有一个处于以下状态的数组：

const [semiForm, setSemiForm] = useState([
    {
        name: '',
        image: '',
        exist: false,
        mId: null,
        mDetails: [
            {
                line_type: '',
                stock_type: '',
                gl_categories: '',
                planner_number: '',
                planner_name: '',
                buyer_number: '',
                buyer_name: '',
                serial_no: '',
                lot_process_type: '',
                master_planning_family: '',
                level_1_category: '',
                level_2_category: '',
                level_3_category: '',
                level_4_category: '',
                category_code: '',
                unit_of_measure: '',
                secondary_uom: '',
                purchasing_uom: '',
                shipping_uom: '',
                production_uom: '',
                component_uom: ''
            },
        ],
        prepared_by: '',
        recipe_no: '',
        approved_by: '',
        recipe_date: '',
        shelf_life: '',
        recipe_type: '',
        section: '',
        approval_date: '',
        ty_final_product: '',
        usable_trim: '',
        ty_aft_chill: '',
        wastage: '',
        pri_ingr: [
            {
                item_code: '',
                item_description: '',
                start_weight: '',
                left_weight: '',
                actual_qty: '',
                uom: '',
                yield: '',
                strg_container: '',
                cook_vessel: '',
                prepared_by: ''
            },
        ],
        steps: [
            {
                description: '',
                image: ''
            },
        ],
        eqp_used: [
            {
                name: ''
            },
        ],
    }
])

我想根据父对象的“名称”向“pri_ingr”数组添加一个新对象。

我尝试使用下面的代码获取父对象的“名称”，但即使在设置状态后它也不起作用。

const addPriIngr = (name) => {
    console.log(name)
    // return
    let newPriIngrObj = {
        item_code: '',
        item_description: '',
        start_weight: '',
        left_weight: '',
        actual_qty: '',
        uom: '',
        yield: '',
        strg_container: '',
        cook_vessel: '',
        prepared_by: ''
    }

    semiForm.map((item, index) => {
        console.log(item.name);
    if (item.name === name) {
        return { ...item, pri_ingr: [...item.pri_ingr, newPriIngrObj] }
    }
    return {
        ...item
    }
    })
}

同样，我也会将它用于其他嵌套的对象数组。

请帮忙排序。

Answer 1

您的映射代码看起来不错。但是，当调用

semiForm.map()

时，你并没有真正改变任何东西。您必须以有用的方式使用

semiForm.map()

的结果。目前，您只调用

.map()

，而没有对结果执行任何操作。

而不是做

semiForm.map((item, index) => {
    console.log(item.name);
    if (item.name === name) {
        return { ...item, pri_ingr: [...item.pri_ingr, newPriIngrObj] }
    }
    return {
        ...item
    }
});

你应该这样做

let semiFormResult = semiForm.map((item, index) => {
    console.log(item.name);
    if (item.name === name) {
        return { ...item, pri_ingr: [...item.pri_ingr, newPriIngrObj] }
    }
    return {
        ...item
    }
});
setSemiForm(semiFormResult);

这样，您就告诉 React 使用

.map()

调用的结果作为

semiForm

的新状态。

我不知道更新状态是什么意思，但请注意，状态应该在调用

.map()

之后更新 - 而不是在传递给

.map()

的函数内部。

如果这不能解决您的问题，例如数据未正确显示，我相信问题不在于您对

semiForm

的更新，而在于您的 JSX 绑定中的某个地方。也许绑定没有按照您期望的方式更新？