反应：下拉显示重复选项比给定

Posted 2023-02-19

【中文标题】反应：下拉显示重复选项比给定

【英文标题】：React: Dropdown showing duplicate options than given

【发布时间】：2021-02-04 07:01:32

【问题描述】：

对于本地化语言，我创建了一个下拉菜单，其中包含两个选项 Eng 和 Th（泰语）。但是在获取数据时，会显示四个选项。

例如，如果我选择了泰语，那么3个泰语选项，显示一个英文，反之亦然。如图

请帮忙解决。

我的选择代码如下：

    <select
         name="EN"
         id="EN"
         onChange=(e) => 
                      localStorage.setItem("lang", e.target.value);
                      window.location.reload(false);
                    
      >
         localStorage.getItem("lang") !== null ? (
          <option selected=localStorage.getItem("lang")>
             localStorage.getItem("lang").toUpperCase()
          </option>
            ) : null
          <option value="en">EN</option>
          <option value="th">TH</option>
 </select>

【参考方案1】：

第一个显示的是您在此处编写的选定选项：

<option selected=localStorage.getItem("lang")>
             localStorage.getItem("lang").toUpperCase()
          </option>

当您显示下拉菜单时，第二个是您选择的，我相信这是默认情况下选择元素的工作方式。我不知道如何改变这种行为。

现在，第三个和第四个选项就是你在这里写的：

<option value="en">EN</option>
<option value="th">TH</option>

我会这样做：

(localStorage.getItem("lang")) === en ? 
<option value="th">TH</option> : 
<option value="en">EN</option>)

这样，您将只有选定的一项，而未选定的一项作为选项。您编写代码的方式将始终显示一个 EN 和一个 TH 选项，而不管选择的选项。

编辑：再次查看代码后，我不明白您为什么要获取选定的语言作为选项。这样做会更容易：

 <select
         name="EN"
         id="EN"
         onChange=(e) => 
                      localStorage.setItem("lang", e.target.value);
                      window.location.reload(false);
                    
      >
       
          <option selected value="en">EN</option>
          <option value="th">TH</option>
 </select>

另外，我会将选择的“名称”和“id”重命名为 langSelector 或类似的名称，而不是与特定选项相关，因为这可能会根据用户的决定而改变。

如果您真的只想有两个选项（实际上是一个），我会将此答案作为指导，并根据存储在本地存储中的“lang”使占位符成为条件，选项将是也是有条件的，就像我已经给出的例子：

https://***.com/a/30525521/14492009

【参考方案2】：

value = localStorage.getItem("lang") || "EN" - 将 value 属性设置为 select。

试试这个方法，

       <select name="EN" id="EN"
            value = localStorage.getItem("lang") || "EN"
            onChange=(e) => 
                localStorage.setItem("lang", e.target.value);
                window.location.reload(false);>
            <option value="en">EN</option>
            <option value="th">TH</option>
        </select>