React inline style用findIndex做三元条件触发非函数错误解决方案

• 条件判断误用赋值运算符
  原代码中if ((index = -1))是赋值操作而非相等判断，会强制将index赋值为-1，逻辑永远执行push分支，完全不符合预期。
• 错误使用数组方法的返回值更新state
  Array.push()的返回值是修改后数组的长度（数字类型），Array.splice()的返回值是被删除元素组成的数组。将这两个返回值直接通过setTabHidden(newTab)更新state，会导致原本为数组类型的tabHidden被覆盖为非数组类型，后续调用tabHidden.findIndex时，非数组类型不存在该方法，因此抛出对应报错。
• 索引查询对象不统一
  原代码先拷贝tabHidden得到arrCopy，但查询索引时仍使用原statetabHidden，虽然不是核心报错原因，但存在异步更新导致state不一致的隐患。

为什么组件挂载时逻辑正常，点击后才报错？
初始状态下tabHidden是正确的数组类型，因此挂载时的inline style逻辑可以正常执行。第一次触发toggleHide后，state被错误覆盖为非数组类型，后续渲染执行tabHidden.findIndex时就会触发报错。

修正后的代码针对性解决了所有问题：

1. 将条件判断改为if (index === -1)，使用严格相等运算符正确判断元素是否不在数组中
2. 直接操作拷贝得到的数组arrCopy，调用push/splice修改后直接把整个arrCopy作为新值更新state，保证tabHidden永远是数组类型
3. 索引查询改为从拷贝数组arrCopy中查询，逻辑更严谨

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