React JSX Select DefaultValue未生效

Question

我一直在查看React中的表单元素，并检查了文档(https://reactjs.org/docs/forms.html#the-选择标记）并回答stackoverflow问题，例如（如何在react select和react JSX中设置默认值：在selected上选择selected

我没有创建这样的选择组件。我有一个标题组件，当我渲染标题时，我在其中有一个select元素。select元素是通过Ajax调用填充的，这可能就是没有设置默认值的原因。

我的代码如下：

useEffect(() => {
  // do ajax call and set currenclyList
});
return (
  <header className="row block plain center">
    <div>
      <h1>Shopping Cart</h1>
    </div>
    <div>
      <select
        className="dropdown"
        onChange={handleChange}
        defaultValue="USDGBP"
      >
        {Object.keys(currencyList).map((element) => {
          return (
            <option
              key={element}
              value={element}
              data-price={currencyList[element]}
            >
              {element}
            </option>
          );
        })}
      </select>
    </div>
  </header>
);

我已经设置了defaultValue="USDGBP"，因为我知道下拉列表最终会被这个和其他几个列表填充。但是当元素被呈现时，它总是被设置为列表中的第一项。

如何强制此select元素查找USDGBP元素并将其设置为默认值？

Answer 1

使用valueprop而不是defaultValue。

function App() {
  const currencyList = { GBPUSD: 16.45, USDGBP: 15.74, EURGBP: 12.45 };
  const [selected, setSelected] = React.useState("USDGBP");

  const handleChange = (event) => {
    setSelected(event.target.value);
  };
  return (
    <header className="row block plain center">
      <div>
        <h1>Shopping Cart</h1>
      </div>
      <div>
        <select className="dropdown" onChange={handleChange} value={selected}>
          {Object.keys(currencyList).map((element) => {
            return (
              <option
                value={element}
                key={element}
                data-price={currencyList[element]}
              >
                {element}
              </option>
            );
          })}
        </select>
      </div>
    </header>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>