javascript - React.js 组件中的选择元素在 Firefox 中首次单击时未更新

Question

React.js 组件中的选择元素在 Firefox 中需要点击 2 次才能更新，但在 Chrome 和 Safari 中第一次点击时会正确更新。

它是一个使用 Redux + React-Redux 的组件，选择元素的值由通过 mapStateToProps 传递给它的存储值决定。

React Devtools 显示选择元素的值正确更新，但 DOM 本身不会在第一次点击时更新。

Redux Devtools 显示正在传递的正确操作和正在进行的正确状态更改。

我在 CodeSandbox 中创建了组件树的独立重建(它在这里正常运行，所以帮助不大):https://codesandbox.io/s/jl7rpw3635

Here's a gif of the problem

提前致谢!

Answer 1

我最终通过修改选择组件以在挂载时呈现其选项解决了这个问题，然后将它们附加到类属性，避免每次选择组件更新时再次重新呈现每个选项(它们永远不会改变，所以它可能使这样做是有意义的)- https://codesandbox.io/s/m7m2qqp9py