React Hooks布尔类型state未正确设置 宝可梦20问游戏BUG排查

问题1：进化提问的渲染判断逻辑错误 #

你当前的渲染判断条件是：

{type && weakness && !evolve && (
  // 进化提问DOM
)}

你用!evolve作为展示判断的条件，evolve初始值为null，!null的结果为true，此时可以正常展示提问。但当用户点击「否」给evolve赋值为false时，!false的结果仍然是true，会导致进化提问重复触发渲染，同时伴随宝可梦数组的重复过滤逻辑，最终导致页面卡住。
正确的判断逻辑应该是仅当evolve还未被赋值（也就是保持初始的null状态）时才展示提问，修改如下即可：

{type && weakness && evolve === null && (
   <div>
      <strong>你所选的宝可梦可以进化吗？</strong>
      <EvolveBtn mapEvolutions={mapEvolutions} onClick={evolveAssign} />
   </div>
)}

问题2：evolve的打印方式有误 #

你看到打印结果evolve = 为空，不是evolve没有被赋值，是因为JSX渲染时会忽略布尔值false的直接输出，你如果要确认state值，可以把值转成字符串再打印：

<p>evolve = {String(evolve)}</p>

修改后你就能看到点击「否」后evolve的值为false，不存在布尔类型state的特殊问题，是JSX的渲染特性导致你误以为state未赋值。

内容的提问来源于stack exchange，提问作者user15498557