Блог

Я работаю над формой, которая содержит раздел, в котором пользователи могут выбирать количество и категорию билета на концерт в выпадающем списке. Этот компонент создается динамически и может содержать больше элементов (количество категория). Выпадающие списки категорий связаны друг с другом. Поэтому, если вы выбираете одну категорию, значение других выпадающих списков должно быть установлено на то же выбранное значение. Но мне также нужно имя выпадающего списка каждой категории для проверки.

Вот как я создал объект категории:

 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: "" }
}
  

Как я показываю и обрабатываю компонент ticket

   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: "11", 9872: "7"
}
  

но я ожидаю:

 {​
  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
      }),
      {}
    )
  }));
};