在react中更新嵌套对象

Question

我在反应中仅更新嵌套对象的参数时遇到困难，但整个对象都会更新。 即给定以下对象

templateObject

，我只想更新

sales_column_settings

的值，而不更新

invoice_column_settings

或

purchase_column_settings

的值

let templateObject = {
    "sales_column_settings": {
        "items": {
            "items": true,
            "other": false,
            "Products": false,
            "Services": false
        },
        "price": {
            "rate": false,
            "other": "",
            "price": false
        },
        "units": {
            "hours": false,
            "other": "",
            "quantities": false
        },
        "amount": {
            "other": "",
            "amount": false
        },
         "template_content": {
            "hide_price": false,
            "hide_amount": false,
            "hide_quality": false
        }
    },
    "invoice_column_settings": {
        "items": {
            "items": true,
            "other": false,
            "Products": false,
            "Services": false
        },
        "price": {
            "rate": false,
            "other": "",
            "price": false
        },
        "units": {
            "hours": false,
            "other": "",
            "quantities": false
        },
        "amount": {
            "other": "",
            "amount": false
        },
        "template_content": {
            "hide_price": false,
            "hide_amount": false,
            "hide_quality": false
        }
    },
    "purchase_column_settings": {
        "items": {
            "items": true,
            "other": false,
            "Products": false,
            "Services": false
        },
        "price": {
            "rate": false,
            "other": "",
            "price": false
        },
        "units": {
            "hours": false,
            "other": "",
            "quantities": false
        },
        "amount": {
            "other": "",
            "amount": false
        },
         "template_content": {
            "hide_price": false,
            "hide_amount": false,
            "hide_quality": false
        }
    }
}

我正在使用以下函数更新对象

export const updateTemplateColumn = (value, parentKey, key) => {
//where type = "sales_column_settings";
    let newObj = { ...templateObject[type] };

    if (parentKey === "template_content") {
        newObj[parentKey][key] = value;
    } else {

        for (let property in newObj[parentKey]) {
            newObj[parentKey][property] = property === key;
        }
    }
    console.log(type);
    return {newObj}
}

这是我的输入字段的结构。

  <div className="row">
              <div className="col-12 mb-3">
                <label className="fw-bold text-gray-500 my-2">Items</label>
                <div className="custom-form-check mb-3">
                  <input
                    className="custom-form-check-input"
                    type="radio"
                    name="items"
                    value="items"
                    checked={templateObject[settingsColumnType] && templateObject[settingsColumnType]["items"]["items"] === true}
                    id="items1"
                    onChange={event => updateTemplateColumn(event.target.value, "items", "items")} />
                  <label className="custom-form-check-label">
                    Items
                  </label>
                </div>
                <div className="custom-form-check mb-3">
                  <input
                    className="custom-form-check-input"
                    type="radio"
                    name="items"
                    value="Products"
                    checked={templateInfo[settingsColumnType] && templateInfo[settingsColumnType]["items"]["Products"] === true}
                    id="items2"
                    onChange={event => updateColumnSettings(event.target.value, "items", "Products")} />
                  <label className="custom-form-check-label">
                    Products
                  </label>
                </div>
                <div className="custom-form-check mb-2">
                  <input
                    className="custom-form-check-input"
                    type="radio"
                    name="items"
                    value="Services"
                    checked={templateInfo[settingsColumnType] && templateInfo[settingsColumnType]["items"]["Services"] === true}
                    id="items3"
                    onChange={event => updateColumnSettings(event.target.value, "items", "Services")} />
                  <label className="custom-form-check-label">
                    Services
                  </label>
                </div>
                <div className="custom-form-check mb-3">
                  <input
                    className="custom-form-check-input mt-2"
                    type="radio"
                    name="items"
                    value="other"
                    checked={templateInfo[settingsColumnType] && templateInfo[settingsColumnType]["items"]["other"] === true}
                    id="items4"
                    onChange={event => updateColumnSettings(event.target.value, "items", "other")} />
                  <label className="custom-form-check-label d-inline-flex w-100">
                    <span className="mt-2">Other:</span> <input className="form-control form-control-sm ms-3" />
                  </label>
                </div>
              </div>
</div>

这是 UI 代码片段>

如何成功更新“销售”选项卡的详细信息而不更新“购买”选项卡的详细信息，因为它们使用相同的表单详细信息？

Answer 1

我根据您的代码创建了一个示例：

https://codesandbox.io/p/sandbox/nested-object-5x22pf

基本上，这里的关键是将

templateObject

更改为状态对象并相应地更新您的

updateTemplateColumn

：

  const updateTemplateColumn = (value, parentKey, key, type) => {
    let updatedTemplateObject = { ...templateObject };

    if (parentKey === "template_content") {
      updatedTemplateObject[type][parentKey][key] = value;
    } else {
      Object.keys(updatedTemplateObject[type][parentKey]).forEach(property => {
        updatedTemplateObject[type][parentKey][property] = (property === key) ? value : updatedTemplateObject[type][parentKey][property];
      });
    }

    setTemplateObject(updatedTemplateObject);
  };

（但正如评论中提到的，

react-hook-form

适合您的情况）