使用循环创建多个react-select

import React, { useState } from 'react';
import Select from 'react-select';

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' },
  // 添加更多选项...
];

const [selectValues, setSelectValues] = useState({});

const renderSelects = () => {
  const numSelects = 3; // 设置要创建的react-select数量

  const selects = [];
  for (let i = 0; i < numSelects; i++) {
    const selectId = `select-${i}`;
    selects.push(
      <Select
        key={selectId}
        options={options}
        value={selectValues[selectId]}
        onChange={(selectedOption) =>
          setSelectValues((prevValues) => ({
            ...prevValues,
            [selectId]: selectedOption,
          }))
        }
      />
    );
  }

  return selects;
};

return <div>{renderSelects()}</div>;