react Bug: Server hydration mistmatch and radio group with defaultChecked

vltsax25 于 5个月前发布在 React

关注(0)|答案(5)|浏览(69)

从服务器进行填充时，如果单选按钮组中最初检查的输入与使用 defaultChecked (未受控)的输入不匹配，没有关于不匹配的警告，并且组件以错误的方式处理在服务器有效载荷中最初选择的输入(当选择它时，标记为选定的输入的 onChange 回调属性不会被触发)。
值得注意的是，使用受控输入(使用 checked)可以消除这个bug。
React版本：16.13.1

重现步骤

在下面的示例中，请确保在 Code Sandbox 内刷新浏览器。
检查第一个单选按钮。验证单选按钮已选中，但旁边的文本仍然显示为“未选中”(这意味着 onChange 属性没有被触发)
尝试选择任何其他选项(正常工作),然后再选择第一个(也正常工作)。
再次刷新页面，选择除第一个选项之外的任何其他选项都可以正常工作。
链接到代码示例：https://codesandbox.io/s/affectionate-stonebraker-3wj68

当前行为

我知道使用 hydrate 不能保证解决不匹配问题，但根据文档，它应该在开发过程中警告这些不匹配(https://reactjs.org/docs/react-dom.html#hydrate)。在这种情况下，React 没有警告不匹配，行为是错误的，如示例和重现步骤所示。

预期行为

理想情况下，React 应该能够正常工作，但由于文档中没有保证这个问题会被修复，至少应该警告不匹配的问题。

react

来源：https://github.com/facebook/react/issues/18502

5条答案

按热度按时间

zpjtge221#

是的！在这种情况下，修复方法是显示不匹配警告还是让onChange一开始就对已选中的输入正常工作？

赞(0）回复(0）举报 5个月前

ifsvaxew2#

我们应该警告不匹配的情况，并采取最简单的方法(因为当存在不匹配时，我们不能提供任何保证)。

赞(0）回复(0）举报 5个月前

ss2ws0br3#

你好！

我开始研究这个项目并发现了一些问题。

shouldIgnoreAttribute 返回 true,因为 propertyInfo.type === RESERVED。因此，代码块中的任何警告都会被跳过。

...
      } else if (
        !shouldIgnoreAttribute(propKey, propertyInfo, isCustomComponentTag) &&
...

此外，在寻找不匹配项时，似乎完全跳过了 checked 属性。

...
      } else if (
        propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
        propKey === SUPPRESS_HYDRATION_WARNING ||
        // Controlled attributes are not validated
        // TODO: Only ignore them on controlled tags.
        propKey === 'value' ||
        propKey === 'checked' ||
        propKey === 'selected'
      ) {
        // Noop
      } 
...

我很乐意提交一个 PR,但需要一些关于如何继续的指导。谢谢！

赞(0）回复(0）举报 5个月前

svgewumm4#

这个复现是在React 18上吗？我尝试重新运行沙箱，但HTML是内联的，所以很难说到底哪里出了问题。作为示例，它在18上确实会出错。

赞(0）回复(0）举报 5个月前

r1wp621o5#

有兴趣调查修复方法吗？

赞(0）回复(0）举报 5个月前