React select 输入值未在页面刷新时重置

Question

FWIW，我正在使用通过 AWS Amplify 部署的 Gatsby。

我的网站上有一个简单的语言切换器。当我在新选项卡或隐私浏览中打开网站时，行为符合预期。目前默认为英语，您可以切换为德语。但是，当我只是进行简单的刷新时，页面上的可翻译文本会变回英语，而 select 中显示的是“德语”。然而，最奇怪的是，检查 select 看起来像所附图片。虽然在页面上它显示德语 selected，但在 HTML 中英语选项有 selected=""。哪个是正确的，但为什么显示德语？

  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang);
  };
...
 <select
  value={i18n.language}
  onChange={(event) => changeLanguage(event.target.value)}

Answer 1

需要查看 <select> 组件的其余部分才能了解您设置的其他道具以及如何填充 <option> 的道具。但是，在填充子项时，您是否将 selected 属性设置为正确的 <option>？

此外，<select> 元素 (Select Attributes) 没有 value 属性。如果您使用的是图书馆，您应该参考他们的文档。否则，对于直接 HTML，您需要在填充 <option> 时设置 selected <option>。

const languages = ['english', 'german'];

const changeLanguage = (lang) => {
  i18n.changeLanguage(lang);
};

...

<select
  // value={i18n.language} - there is no `value` prop for `select` element
  onChange={(event) => changeLanguage(event.target.value)}
  ...
>
  {languages.map((language) => (
    <option value={language} selected={language === i18n.language} />
  ))}
</select>

更新

@a.mola 请参阅此处提出的类似问题 value attribute on <select> tag not selecting default option

此外，这是一个 <select> 元素的工作示例，其中 <select> 中的 value 与 <option> 中的 selected 相对：

Codepen: HTML Select - Setting Value

Answer 2

您在 Firefox 上遇到过这种行为测试吗？我在我的 Gatsby 应用程序上遇到了同样的问题，结果证明这是一个 Firefox 错误，因为这种行为不会发生在 Chrome 上（我没有在其他浏览器上测试）。

按照 this other answer 中所述在 select 标签上设置 autocomplete="off" 应该可以解决问题。

React select 输入值未在页面刷新时重置

React select input value is not resetting on page refresh

javascript

reactjs

aws-amplify