当数据嵌套在数组中时捕获单个选择下拉值

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>

  );

}

同样，我只希望单击的选择选项进行更改；现在，当单击任何给定的选择选项时，它们都会发生变化。