reactjs - 通过创建动态选择来响应 useRef 钩子

Question

在构建选择期间，我需要验证没有创建重复的“选项”元素。

我认为一种方法是使用 useRef 钩子。但我对这种行为感到困惑。我确定我做错了什么，或者我没有考虑某些方面。

我写了一个小示例代码，如下所示：

import React, { useRef } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Form } from "react-bootstrap";

export default function App() {
  const options = ["de-de", "en-gb", "es-es", "fr-fr", "it-it", "nl-be"];
  let selectRef = useRef(null);
  return (
    <div className="App">
      <Form>
        <Form.Group>
          <Form.Control as="select" custom ref={selectRef}>
            {options.map((cc) => {
              console.log("selectRef", selectRef, "cc", cc);
              return (
                <option key={cc} value={cc}>
                  {cc}
                </option>
              );
            })}
          </Form.Control>
        </Form.Group>
      </Form>
    </div>
  );
}

我添加了一个指向https://stackblitz.com的链接，其中显示了示例的代码：https ://stackblitz.com/edit/react-jlwttg?file=src/App.js

这种行为很奇怪：每次在控制台上添加一个新选项的迭代中，我看到我的引用的当前值已经包含所有元素。这怎么可能？我在哪里做错了？另外，我注意到如果我刷新我的页面，我的引用总是空的。

我提前谢谢你。

标签： reactjsreact-hooks