默认值未显示在 React hooks 应用程序的选择下拉框中

Question

在我的反应钩子选择下拉菜单中，默认值不显示。在页面加载时，我想在下拉列表中显示 Select Position。 有人可以告知为什么它不显示默认值吗？

代码沙箱链接： https://codesandbox.io/s/sad-diffie-kx9h49?file=/src/App.js:0-991

import "./styles.css";
import React, { useEffect, useState } from "react";

export default function App() {
  const [defaultValue, setDefaultValue] = useState("Select Position");
  const [positionType, setPositionType] = useState([
    "Goal Keeper",
    "Striker",
    "Attacking Midfielder",
    "Right Midfielder",
    "Defending Midfielder",
    "Left Midfielder",
    "Center Back",
    "Right Fullback",
    "Left Fullback"
  ]);

  useEffect(() => {
    setDefaultValue(defaultValue);
  }, []);

  const handlePositionTypeChange = (e) =>
    console.log(positionType[e.target.value]);
  return (
    <div className="App">
      <label>Position</label>
      <select
        defaultValue={defaultValue}
        onChange={(e) => handlePositionTypeChange(e)}
        key={defaultValue}
        className="browser-default custom-select"
      >
        {positionType.map((position, key) => (
          <option value={key}>{position}</option>
        ))}
      </select>
    </div>
  );
}

Answer 1

import "./styles.css";
import React, { useEffect, useState } from "react";

export default function App() {
  const [selectedValue, setSelectedValue] = useState("Select Position");
  const [positionType, setPositionType] = useState([
    "Goal Keeper",
    "Striker",
    "Attacking Midfielder",
    "Right Midfielder",
    "Defending Midfielder",
    "Left Midfielder",
    "Center Back",
    "Right Fullback",
    "Left Fullback"
  ]);


  const handlePositionTypeChange = (e) => {
    console.log("e.target.value", e.target.value);
    setSelectedValue(e.target.value);
  };
  return (
    <div className="App">
      <label>Position</label>

      <select
        value={selectedValue ? selectedValue : ""}
        onChange={handlePositionTypeChange}
        className="browser-default custom-select"
      >
        <option value="Select Position" disabled>
          Select a color...
        </option>
        {positionType?.map((position, key) => (
          <option key={key} value={position}>
            {position}
          </option>
        ))}
      </select>
    </div>
  );
}