Javascript 如何在React钩子中设置嵌套对象

我正在开发一个表单，其中包含一个部分，用户可以在下拉列表中选择音乐会门票的数量和类别。此组件是动态创建的，可以有更多的项目（数量+类别）。类别的下拉列表相互关联。因此，如果选择一个类别，其他下拉列表的值应设置为相同的选定值。但我还需要每个类别下拉列表的名称进行验证

以下是我创建类别对象的方式：

const createCategory = () => {
        let cat = {}
        let nestedCat = {}
        for (let it in item) {
            for (let bt in item[it].buyertypes) {
                cat2[item[it].buyertypes[bt].id] = ''
            }
            cat[item[it].id] = nestedCat
            nestedCat = {}
        }
        return cat
    } 
    const [category, setCategory] = useState(createCategory());

这是初始对象：

{​
  9871: { 1: "", 2: "", 3: "" }
​
  9872: { 5: "", 6: "", 8: "" }
}

如何显示和处理票证组件

  const handleQuantity = e => {
      setQuantity({
          ...quantity,
          [e.target.name]: e.target.value
      });
  }

  const handleCategory = e => {
      setCategory({
          ...category,
          [e.target.name]: e.target.value
      });
 }

 const ShowData = () => {
        let ticketIem = []
        for (let it in item) {
            for (let bt in item[it].buyertypes) {
                let buyerType = item[it].buyertypes[bt]
                ticketIem.push({
                    'price': buyerType.prices, 'catId': item[it].id,
                    'qntId': item[it].buyertypes[bt].id
                })
            }
        }

        return (
            <div>
                {ticketIem.map((i, index) => (
                    <div key={index} >
                        <div>
                            <label>Number</label>
                            <select
                                value={quantity[i.qntId]}
                                onChange={handleQuantity}
                                name={i.qntId}
                            >
                                <option value={0}>0</option>
                                <option value={1}>1</option>
                            </select>
                        </div>
                        <div>
                            <label>Category</label>
                            <select
                                value={category[i.catId]}
                                onChange={handleCategory}
                                name={i.catId}
                            >
                                <option value="">Choose</option>
                                {categories.map((cat, index) => (
                                    <option key={index} value={cat.id} name={i.qntId}>
                                        {cat.description} {cat.value}
                                    </option>
                                ))}
                            </select>
                        </div>
                    </div>
                ))}
            </div>
        )
    }

但我希望：

{​
  9871: { 1: "11", 2: "11", 3: "11" }
​
  9872: { 5: "7", 6: "7", 8: "7" }
}

---

如果要设置特定类别或数量的所有嵌套属性，则还需要迭代这些嵌套属性的键。使用

Object.keys

获取嵌套对象的键数组，并将它们减少为一个新对象，每个键都设置了新值

我还建议使用功能状态更新，因为每个更新都依赖于现有/当前状态，因为它只是简单地复制到下一个状态

const handleQuantity = (e) => {
  setQuantity((quantity) => ({
    ...quantity,
    [e.target.name]: Object.keys(quantity[e.target.name]).reduce(
      (obj, key) => ({
        ...obj,
        [key]: e.target.value
      }),
      {}
    )
  }));
};

const handleCategory = (e) => {
  setCategory((category) => ({
    ...category,
    [e.target.name]: Object.keys(category[e.target.name]).reduce(
      (obj, key) => ({
        ...obj,
        [key]: e.target.value
      }),
      {}
    )
  }));
};

---

它在DrewReese完全有效。如果我想将每个嵌套属性设置为用户在下拉列表中选择的属性，该怎么办？@nimapstanchi这不是

target.value

值吗？还是我不理解你的后续问题？@DrewResse在上一个案例中，我想将特定类别的所有嵌套属性设置为特定值，以便所有下拉列表都具有相同的值，并且您建议的代码可以完美地工作。现在，我想将每个下拉列表的值设置为用户选择的值（不是所有下拉列表的相同值）。现在我希望对象看起来像

{​   9871: { 1: "4", 2: "3", 3: "1" } ​   9872:{5:“1”，6:“7”，8:“4”}

target.value提供了正确的值，但我无法将其设置为正确的嵌套属性。我希望我说清楚了。提前感谢您的帮助。@Nimapstanchi我想我需要更多的上下文，因为现在我没有看到UI与嵌套值的关系。看起来，

name={i.qntId}

和

name={i.catId}

是外部数量/类别键（

event.target.name

），所选选项是值（

event.target.value

），因此我不确定中间键使用的是什么。你能提供一个我可以检查的运行代码沙盒吗？@DrewResse实际上这个用例是前一个用例的扩展。每次用户选择数量时，都会显示一些基于所选数量的促销代码输入字段。我在quantity事件处理程序中的嵌套对象中创建此提升代码项，并给它们一个键名。我无法传递正确的名称={}。我想在handleCode中将每个提升字段的promotionCode对象设置为e.taget.value。

const handleQuantity = (e) => {
  setQuantity((quantity) => ({
    ...quantity,
    [e.target.name]: Object.keys(quantity[e.target.name]).reduce(
      (obj, key) => ({
        ...obj,
        [key]: e.target.value
      }),
      {}
    )
  }));
};

const handleCategory = (e) => {
  setCategory((category) => ({
    ...category,
    [e.target.name]: Object.keys(category[e.target.name]).reduce(
      (obj, key) => ({
        ...obj,
        [key]: e.target.value
      }),
      {}
    )
  }));
};