让我们假设您的state.values如下所示：

[
  {
    id: 0,
    name: "First value"
  },
  {
    id: 1,
    name: "Second value"
  }
]

为了将“pick and select”显示为select元素（占位符）的默认值，最好不要在数据中包含它。相反，您可以在数据选项沿着呈现一个额外的选项，然后选择该值作为select元素的选定值：

<select className="form-select" aria-label="Default select example">
  <option value={-1} selected>
    Please pick and select
  </option>
  {
    this.state.values.map((obj) => {
      return (
        <option key={obj.id} value={obj.id}>
          {obj.name}
        </option>
      );
    })
  }
</select>

如果您还想控制所选值，可以使用useState为所选值声明一个状态，并在所选值更改时更改该状态：

const [selectedValue, setSelectedValue] = useState(-1);

const handleOnChange = (event) => {
  setSelectedValue(event.target.value);
}

return (
  <select value={selectedValue} onChange={handleOnChange} className="form-select" aria-label="Default select example">
    <option value={-1}>
      Please pick and select
    </option>
    {
      this.state.values.map((obj) => {
        return (
          <option key={obj.id} value={obj.id}>
            {obj.name}
          </option>
        );
      })
    }
  </select>
);

阅读更多here。

如果有一个对象数组，如下所示：

[
  { id: 0, name: "one" },
  { id: 1, name: "two" },
  { id: 2, name: "three" }
]

您可以在select中将它们显示为选项，如下所示：

<div>
<select value={selected} onChange={handleChange}>
  {values.map((obj) => {
    return (
      <option key={obj.id} value={obj.id}>
        {obj.name}
      </option>
    );
  })}
</select>
</div>

然后，在handleChange函数中，可以设置一个状态来存储所选择的项（这里我存储的是obj的id，在本例中与values数组的索引相同）：

const [selected, setSelected] = useState(0);

function handleChange(event) {
  setSelected(event.target.value);
}

然后您可以使用它来输出选择：

<>
<div>You have "{values[selected].name}" selected.</div>
</>

请查看React docs了解更多信息。