React native，如何检查数组是否相等

Question

我已经使用 React Native 创建了 PIN 码锁屏。你可以在这里看到模拟器的代码 - https://snack.expo.dev/@codewithbanchi/pincode

默认引脚为 1234，并分配给一个数组。然后我从用户那里获取输入并将其分配给另一个数组。然后我写这个是为了检查用户输入的密码是否等于默认密码。

if(passcode===defaultCode){
        alert("Login sucssesfull");
      }else{
        alert("Login failed");
      }

但每次用户触摸按钮时，都会出现警告“Lofin failed” 这里出了什么问题我在这里定义了我的完整代码，你也可以去上面的展览link用模拟器观看。

import React from "react";
import { Alert, StyleSheet, Text, Touchable, TouchableHighlight, TouchableOpacity,useState, View } from "react-native";
import Loading from './Loading';

const Buttons = () => {

    const defaultCode = React.useState(['1','2','3','4']) 
    const [passcode , setPasscode] = React.useState(['','','',''])
    const presControl = num =>{
      let tempCode = [...passcode];
      for(var i = 0; i<tempCode.length;i++){
        if(tempCode[i] == ''){
             tempCode[i] = num;
               break;
        }else{
               continue;
        }
      }
       
      setPasscode(tempCode);
    }
        if(passcode===defaultCode){
            alert("Login sucssesfull");
          }else{
            alert("Login failed");
          }
      
const clearPress = () =>{
      let tempCode = [...passcode]
      for(var i = tempCode.length-1;i>=0;i--){
        if(tempCode[i] != ''){
          tempCode[i]='';
          break;
        }else{
          continue;
        }
      }
      setPasscode(tempCode);
    };
    
    let nopad = [
      {id:1},
      {id:2},
      {id:3},
      {id:4},
      {id:5},
      {id:6},
      {id:7},
      {id:8},
      {id:9},
      {id:0}
    ]; 
    return(
        <View >
        <View style={styles.boxcontaner} >
        {passcode.map(p =>{
          return  <View style={p !=''? styles.box2:styles.box1}></View>
        })}       
        </View>
            <View style={styles.noBox}>
            {nopad.map(num =>{
              return(
                        <TouchableOpacity style={styles.box}
                           key={num.id}
                           onPress={()=>presControl(num.id)} >
                            <Text style={styles.title}>{num.id}</Text>
                        </TouchableOpacity>        
              );      
              
            })} 
            </View>
            <TouchableOpacity onPress={clearPress} style={styles.deleter} >
                        <Text style={styles.title}> x
                        </Text>
            </TouchableOpacity>
        </View>
    );
}

const styles = StyleSheet.create({
 
  title: {
   fontSize:40,
   justifyContent:'center',
   marginTop:5,
   
  },
    box1: {
    width:13,
    height:13,
    borderRadius:13,
    borderWidth:1,
    borderColor:'gray'
  },
  box2: {
    width:13,
    height:13,
    borderRadius:13,
    borderWidth:1,
    borderColor:'gray',
    backgroundColor:'red'
  },
  box: {
    width:70,
    height:70,
    borderRadius:70,
    borderWidth:1,
    borderColor:'green',
    alignItems:'center',
    backgroundColor:'#F2F3F4',
    justifyContent:'center',

  },

  boxcontaner:{
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'space-between',
    marginLeft:40,
    marginRight:40,
    marginTop:10,
  },

  noBox:{
    alignItems:'center',
    justifyContent:'center',
    marginTop:100,
    flexDirection:'row',
    flexWrap:'wrap',
    marginLeft:20,
    width:270,
    height:200,
  },

  deleter:{
    width:70,
    height:70,
    borderRadius:70,
    borderWidth:1,
    borderColor:'green',
    alignItems:'center',
    backgroundColor:'#F2F3F4',
    marginLeft:190,
    marginTop:10
  }

});

export default Buttons;

Answer 1

数组是引用类型，请阅读此 link - https://masteringjs.io/tutorials/fundamentals/compare-arrays，您可以使用此代码：

const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [1, 2, 3];

function arrayEquals(a, b) {
  return Array.isArray(a) &&
    Array.isArray(b) &&
    a.length === b.length &&
    a.every((val, index) => val === b[index]);
}

arrayEquals(a, b); // false
arrayEquals(a, c); // true

https://snack.expo.dev/lmKFsz5J6 完成示例

React native，如何检查数组是否相等

React native, how to check arrays are equal or not

arrays

react-native

use-state