Захватывать отдельные значения раскрывающегося списка, когда данные вложены в массив

Question

У меня возникают проблемы при выборе / захвате отдельных опций выбора, когда они вложены в массив.Прямо сейчас, когда в любом из элементов массива нажата одна опция выбора, все опции изменяются на это значение.

Прямо сейчас мои настройки довольно стандартны для того, что будет работать с отдельным входом выпадающего списка.Я не уверен, как идти дальше с исправлением проблемы.

Вот мои настройки:

const array = [
  { thing: "itemone", thingArr: [1, 2, 3, 4] },
  { thing: "itemtwo", thingArr: [1, 2, 3, 4] },
  { thing: "itemthree", thingArr: [1, 2, 3, 4] },
  { thing: "itemfour", thingArr: [1, 2, 3, 4] }
];

function App() {
  const [quantity, setQuantity] = useState(1);

  const onSelectChange = e => {
    setQuantity(e.target.value);
  };

  return (
    <div className="App">
      {array.map(item => (
        <div key={item.thing}>
          <p>{item.thing}</p>
          <select value={quantity} onChange={onSelectChange}>
            {item.thingArr.map(option => (
              <option key={option} value={option}>
                {option}
              </option>
            ))}
          </select>
        </div>
      ))}
    </div>
  );
}

Опять же, я хочу, чтобы изменялась только опция выбора, по которой щелкают;прямо сейчас все они изменяются при нажатии любой выбранной опции выбора.

Answer 1

Вы должны хранить в состоянии выбранный предмет для каждой вещи (выпадающий список).

Вот фрагмент кода рабочего компонента:

const array = [
  {thing: 'itemone', thingArr: [1, 2, 3, 4]},
  {thing: 'itemtwo', thingArr: [1, 2, 3, 4]},
  {thing: 'itemthree', thingArr: [1, 2, 3, 4]},
  {thing: 'itemfour', thingArr: [1, 2, 3, 4]},
]

function App() {
  const [selectedItems, updateQuantities] = useState({})

  const onSelectChange = thing => e => {
    updateQuantities({
      ...selectedItems,
      [thing]: e.target.value
     })
  }

  return (
    <div className="App">
      {array.map(item => (
        <div key={item.thing}>
          <p>{item.thing}</p>
          <select value={selectedItems[item.thing]} onChange={onSelectChange(item.thing)}>
            {item.thingArr.map(option => (
              <option key={option} value={option}>
                {option}
              </option>
            ))}
          </select>
        </div>
      ))}
    </div>
  )
}

Тот же код, с которым вы можете работать, https://codesandbox.io/s/react-codesandbox-ge41g

Обновление: другая реализация функции стрелки onSelectChange

  const onSelectChange = (thing, e) => {
    updateQuantities({
      ...selectedItems,
      [thing]: e.target.value
     })
  }
  ...
  return (
    ...
    <select value={selectedItems[item.thing]} onChange={(e) => onSelectChange(item.thing, e)}>
    ...
  );