记一次React线上问题排查

昨天运营报了一个问题，之前一直正常运行的React项目突然页面访问不了了，通过排查发现页面报错了，错误如下：

Uncaught TypeError: Failed to set an indexed property on 'CSSStyleDeclaration': Index property setter is not supported.
    at Object.setValueForStyles (index.js?t=:82)
    at m._updateDOMProperties (index.js?t=:83)
    at mountComponent (index.js?t=:83)
    at Object.mountComponent (index.js?t=:12)
    at mountChildren (index.js?t=:83)
    at m._createInitialChildren (index.js?t=:83)
    at mountComponent (index.js?t=:83)
    at Object.mountComponent (index.js?t=:12)
    at f.performInitialMount (index.js?t=:82)
    at f.mountComponent (index.js?t=:82)

我一头雾水，这不对啊之前线上一直是稳定工作的呀，怎么突然报这个，尝试mac的Safati浏览器是正常访问的，谷歌和火狐最新版本会有访问不了的问题，基本锁定原因应该是浏览器升级的问题，去react的Git上看看有没有类似的Issue，果然不出所料，已经有人报了相同的Issue：

https://github.com/facebook/react/issues/15375

通过查看其中一位的评论我突然发现了什么：

看了之后恍然大悟是不是我的React页面的Style中使用了数组或直接字符串了，赶紧去看看，果不其然：

到此找到解决方式：使用React支持的样式设置方式，问题完美解决。

总结问题原因： 之所以之前版本的浏览器都没有报错那是因为最新版本的浏览器使用了最新的CSS标准，这就意味着最新版本中的CSSStyleDeclaration's的index属性没有了setter方法，所以才导致以上的错误。