“死磕”JavaScript 程序错误：Cannot use 'in' operator...

问题再现

项目的背景：采用 react 系列 + ES6 + webpack。

今天编程时，JavaScript 程序报了这样的错误：Cannot use 'in' operator to search for...，具体错误信息如下：

错误信息

解决思路

坦白说，这样的错误最难调试。因为它并不指向你所写的具体代码，而是泛泛指向了 lib.js 文件（该文件通常是第三方的打包压缩库），你几乎无法依据错误类型与错误指向来定位到实际编程中的错误位置。

怎么办？

在没有章法的规律可循时，这个时候，只有去学习并借鉴罗胖的“死磕”精神了！

死磕步骤：

依据故障页面以及错误信息，定位到出错的文件，这一点应该不难；
在出错的页面中，依次点击调试，看一看在哪一步开始报错了！很关键！比如，一开始加载就出错了，那就定位到 js 文件的初始化部位；点击某个按钮出错了，那就定位到该按钮的对应事件代码中；以此类推。
在定位的代码范围内，采用“折中法”，一点点注释掉，刷新页面查看是否依然出错，如果出错，这说明注释掉部分的代码没有问题，放开注释，继续其他可疑的代码部分；如果没有错误了，恭喜你，你的定位位置就更加精细化了！总体思路就是如此，循环往复，相信，总会有“拨开云雾见朗朗青天”的欢喜的！

定位问题

就拿我的这次经历来说，经历的半个多小时的折腾与波折（主要精力都花在了一个 js 文件里，因为很容易的就能定位到文件级别的），我终于定位到了错误的代码块，如下：

console.log('rendernerererer: ', schoolData)

const schoolNode = (
    <Select style={{width: '100%'}} placeholder="请选择所属学校">
        { schoolData.length && schoolData.map((item, idx) => (
            <Option key={idx} value={`${item.id}`}>{item.name}</Option>
        )) }
    </Select>
);

再看看，这块代码在控制台中的执行信息：

定位错误信息

很显然，输出了 renderererer，并且从中，可以得知：此时的 schoolData为空数组[]。然后，紧接着，就是开头前面给出的那个错误信息再现了！！！

说明了什么？

这不就说明了，就是 console.log() 下面的代码导致的这样的错误吗！

OK，终于定位到错误的根源了！查到错误后，解决就应该是顺水推舟的事情了，我总觉得！

解决问题

人们常犯的一个错误就在于：我们过高的估计了自己的能力，而同时又往往过低的估计了对手的实力！可不是么？在基于 react 框架的开发过程中，类似于

<Select style={{width: '100%'}} placeholder="请选择所属学校">
        { schoolData.length && schoolData.map((item, idx) => (
            <Option key={idx} value={`${item.id}`}>{item.name}</Option>
        )) }
</Select>

这样的代码，我书写得太常见、太普遍、太通用了，而且之前好像都没有出现过什么错误，尤其是像这样令我摸不着头脑的 bug 更是没有。

那么，这一次究竟怎么了呢？

其间具体研习探索细节，在此不表。只说结论吧：应该是在 Select 标签中，当 schoolData 为空数组时，即schoolData.length 为0 了，结果即为false ，导致后续的schoolData.map() 也不会执行。这样就导致了形如：<Select>{ undefined }</Select> 的渲染结果。最终，就导致了Cannot use 'in' operator to search for 'value' in undefined 的错误！

<Select></Select> 中可以为 <Select><option value="1">选择</option></Select> ，或者 null ，但是当为 undefined时就出现这样的错误了！

OK，下面给出最终修改后、可正确运行的版本一：

const schoolData = this.state.schoolList;
console.log('rendernerererer: ', schoolData)

const schoolNode = (
    <Select style={{width: '100%'}} placeholder="请选择所属学校">
        { schoolData.length ? schoolData.map((item, idx) => (
            <Option key={idx} value={`${item.id}`}>{item.name}</Option>
        )) : <Option value=''>请选择...</Option> }
    </Select>
);

或者，下面的版本二也可行：

const schoolData = this.state.schoolList;
console.log('rendernerererer: ', schoolData)

const schoolNode = (
    <Select style={{width: '100%'}} placeholder="请选择所属学校">
        { schoolData.length ? schoolData.map((item, idx) => (
            <Option key={idx} value={`${item.id}`}>{item.name}</Option>
        )) : null }
    </Select>
);

结尾的话

谨以记录一下我的 web 前端 JavaScript 开发编程的学习心得，以上也都是我自己的一点习想，难免有所疏漏，乃至根本就是错误的见解。如有方家看出，还请指正！谢谢您的阅读！别忘了点赞呦~~
也欢迎光临我的github