React Native开发PIN码锁时数组相等校验持续失败怎么解决？

具体问题点 #

• 默认密码声明错误
  useState 会返回长度为2的数组，第一个元素为状态值，第二个为状态更新函数。你写的const defaultCode = React.useState(['1','2','3','4']) 是把整个返回数组赋值给了defaultCode，而非你预期的密码数组。默认密码是固定值不需要做状态管理，直接声明为普通常量即可。
• 数组比较逻辑错误
  JS中数组属于引用类型，===比较的是两个变量的内存引用地址，而非内部元素。哪怕两个数组的元素完全一致，只要是不同的数组实例，比较结果永远为false。
• 校验逻辑触发时机错误
  你把校验逻辑直接放在了组件顶层，组件每次渲染都会触发校验，用户每输入1位就会弹出提示，应该等用户输完4位密码后再触发校验。
• 数据类型不匹配
  按键传入的num.id是数字类型，而默认密码数组里的元素是字符串类型，即使逐位比较也会因为类型不一致导致匹配失败。

修复代码示例 #

1. 修改默认密码声明 #

// 去掉useState，直接声明为普通常量，值统一为数字类型
const defaultCode = [1,2,3,4] 
const [passcode , setPasscode] = React.useState(['','','',''])

2. 调整校验逻辑位置与实现 #

将原来放在组件顶层的校验代码删除，把校验逻辑放到输入方法中，等用户输完4位后再触发：

const presControl = num =>{
  let tempCode = [...passcode];
  for(var i = 0; i<tempCode.length;i++){
    if(tempCode[i] == ''){
         tempCode[i] = num;
         break;
    }
  }
  setPasscode(tempCode);
  // 只有4位全部输入完成后才执行校验
  if(tempCode.every(item => item !== '')){
    // 逐位比较两个数组的元素
    const isMatch = tempCode.every((val, index) => val === defaultCode[index])
    if(isMatch){
      alert("登录成功");
    }else{
      alert("登录失败");
      // 登录失败后自动清空已输入内容
      setPasscode(['','','',''])
    }
  }
}

内容的提问来源于stack exchange，提问作者Code With Banchi