更新到 Chrome v65 并开始出现此错误：Expected onClick listener to be a function, instead got type string答案

【问题标题】：Updated to Chrome v65 and started getting this error: Expected onClick listener to be a function, instead got type string更新到 Chrome v65 并开始出现此错误：Expected onClick listener to be a function, instead got type string
【发布时间】：2018-08-17 09:04:53
【问题描述】：

我有一个最近开始发出此错误的 React 应用程序。

https://reactjs.org/docs/error-decoder.html?invariant=94&args[]=onClick&args[]=string

Minified React error #94:

Expected onClick listener to be a function, instead got type string

出现此错误时，我们的按钮/下拉菜单均不起作用，但网页并未冻结。它只发生在应用程序的一个部分。当我们导航到另一个部分并返回时，错误不会再次出现。

我已经检查了我们应用程序中的每个onClick 事件，没有一个函数可以作为字符串传入或作为字符串返回。虽然我们有一些onClick 事件可以传递给NULL 对象。

但是我们已经缩小了产生这个错误的步骤：

当我们更新到 Chrome 版本 65 时才开始出现这种情况，该版本仅在 2 天前发布。该错误不会出现在以前的 Chrome 版本（v65 之前）中
它只发生在我们的 React 应用程序的生产版本中，而不是在 localhost 上（这可能是一个缩小错误吗？）
该错误不会出现在我们的其他应用程序中，这些应用程序也是使用 React 构建并使用类似的 webpack 配置进行了缩小。

有没有人知道为什么会发生这个错误以及我们如何解决它？

【问题讨论】：

其他浏览器能用吗？
我们没有费心测试其他浏览器，因为我们的应用程序是内部的，用户只能使用 Chrome。我会尝试看看是否有任何弹出:)
当然，如果您的代码只能在 Chrome 中运行，那么您使用的更多特定于 Chrome 的东西可能会破坏其他浏览器 - 但无论如何测试都会很有趣跨度>
登录后我的应用程序中遇到了同样的问题。该页面在 prod 中会像您的一样抛出 React 错误 94，但不会在本地抛出任何内容。这完全破坏了我们的 QA 自动化，因为它依赖于带有最新 Chrome 的 Docker 容器来运行 Selenium 测试。另一个注意事项：Chrome Canary (v67) 似乎运行一切都没有错误。
@PP_vinnieg 似乎共同点是缩小的 React 代码与 Chrome v65 不兼容......一些库会产生这个错误。我认为这 2 个解决方案是：1）找到有问题的组件/函数并尝试以某种方式重写它或临时使用不同的组件库或 2）临时在生产环境中使用未缩小的 React 代码。

标签： javascript reactjs google-chrome onclick minify

【解决方案1】：

原来是 React 的缩小版/生产版与 Chrome65 不兼容。

我们将 process.env.NODE_ENV 转回“开发”，直到我们找到更好的解决方案，或者 Chrome 解决了 v65 的问题。

更新：如果您使用的是 redux (https://github.com/reactjs/redux/blob/master/docs/recipes/UsingImmutableJS.md#use-a-higher-order-component-to-convert-your-smart-components-immutablejs-props-to-your-dumb-components-javascript-props) 中的 toJS() HOC，则问题出在 Object.entries()。

要暂时解决此问题，请将 Object.entries 替换为自定义 entries 函数：

(ES6)

const entries = x => Object.keys(x).reduce((y, z) => y.push([z, x[z]]) && y, []);

您应该能够将您的 NODE_ENV 转回“生产”。

目前正试图找出wrappedComponentProps 对象导致问题的原因，但像{ myFunc: function(){} } 这样的常规对象却没有。

（任何调试此问题的帮助将不胜感激！）

在运行 Object.entries() 之前调用 delete wrapperComponentProps[ANY-VALID-KEY] 可以解决问题，所以我怀疑这与对象安全/缓存有关。

【讨论】：

啊，我们没有这个特定的错误，也没有使用toJS，但很高兴记录这个错误并发布解决方案。我们还考虑在生产环境中运行未缩小的 React 构建，直到错误得到解决。

【解决方案2】：

我找到了解决方案。我仍然认为 Chrome v 65 的缩小过程存在错误，但我开始从我的应用程序中删除可点击组件，直到错误消失以清除有问题的组件。

原来是来自react-bootstrap-router 库的<LinkContainer /> 导致了该错误。我们用react-router链接组件替换，错误就消失了！

【讨论】：