我想遍历数组并检查它是否与 React 中的值匹配

Question

我想遍历一个数组并检查它的值是否与数组中 name 的值匹配，如果匹配则将 setFound 值更改为 true （如果匹配，如果不匹配则为 false） 但它一直在改变状态。如果匹配，我在 if 条件中调用函数 changeState 来更改状态。 第一件事是它不会检查数组中的所有值，第二它会不断改变状态。

从“反应”导入反应；

从 '@material-ui/core' 导入 { Paper, Typography, TextField , Button, makeStyles};

从 'react-router-dom' 导入 { Link}

从“反应”中导入 {useEffect}；

const useStyle = makeStyles((主题)=>(

{
    formWrapper : {
        display : 'flex',
        width : '100%',
        height : '100%',
        alignItems : 'center',
        justifyContent : 'center'
    },
    paper : {
        padding : '20px',
        margin : '20px'
    },
    textfield : {
        marginLeft : '20px',
        marginBottom : '10px'
    },
    span : {
        margin: '10px',
        marginLeft : '20px'
    }

}

))

常量寄存器 = () =>{

const classes = useStyle();
const [name, setName] = React.useState('');
const [password, setPassword] = React.useState('');
const [array, setArray] = React.useState([{name : 'faateh', password : 'pass'},{name : 'Yousaf', password : 'pass'}])
const [found, setFound] =  React.useState(false);

useEffect(()=>{localStorage.setItem('array',JSON.stringify(array))},[array])

 const changeState = async() =>{
     await setFound(current => !current)
}

const submit = (event) =>{
    const obj = {}
    event.preventDefault();
    if(array.length === 0){ // Array is empty
        if((name === null || password === null)||(name === '' || password === '')){ //check if name and password are empty
            alert('Enter username and password')
            
        }else{  // not empty then store in localstorage
            localStorage.setItem('name', name);
            localStorage.setItem('password',password);
            obj.id = Math.random();
            obj.name = localStorage.getItem('name');
            obj.password = localStorage.getItem('password');
            setArray(array => [...array,obj])
            setName('');
            setPassword('')
            return alert('You are registered'); 
            
        }
    }
    else  // array not empty
    {
        for( let i = 0; i < array.length ; i++){
            if((name === null || password === null)||(name === '' || password === '')){ //check if name and password is empty
               return alert('Enter username and password')
            }else if(name === array[i].name){ // if it is matched then setFound is set to true
                 changeState();
            }
        }
        if(found){
           return alert('it is matched')
        }else{
            return alert('it is not found')
        }
    }}

return(
    <div>
        <div className = {classes.formWrapper}>
            <Paper elevation={3} className = {classes.paper} >
            <Typography variant="h5" style = {{ textAlign : 'center'}}>Register</Typography>
            <form noValidate autoComplete="off">
                <TextField id="username" className={classes.textfield}  value = {name} name = "username"  label="Username" onChange = {e=>setName(e.target.value)} />
                <br />
                <TextField id="password" className={classes.textfield}  value = {password} name = "password"  label="Password" onChange = {e=>setPassword(e.target.value)} />
                <br />
                <span className ={classes.span}><Link to="/">Sign In</Link></span>
                <br />
                <Button variant="contained" color="secondary" style = {{width : '100%', marginTop : '10px'}} onClick = {submit} >Register </Button>
            </form>
            </Paper>
        </div>
    </div>

)

}

导出默认寄存器；

Answer 1

首先，调用await setFound(current => !current) 毫无意义，因为状态更新无论如何都会异步运行，除非您编写自定义挂钩，否则无法使用挂钩等待状态更新。您可以以旧的setState 方式使用回调。更多信息请点击以下链接。

https://ysfaran.github.io/blog/post/0002-use-state-with-promise/

其次，submit 方法中的逻辑不正确。我相信您正在尝试注册用户，并且您想确保新用户 name 是唯一的，并且它不存在于用户对象列表 array 中。如果是这种情况，您可以在 submit 方法中更新您的逻辑，如下所示。

const submit = (event) => {
    const obj = {};
    event.preventDefault();
    // Array is empty
    if (name === null || password === null || name === "" || password === "") {
      //check if name and password are empty
      alert("Enter username and password");
    } 
    else {
      if (array.some((x) => x.name === name)) alert("user already exists");
      else {
        // not empty then store in localstorage
        localStorage.setItem("name", name);
        localStorage.setItem("password", password);
        obj.id = Math.random();
        obj.name = localStorage.getItem("name");
        obj.password = localStorage.getItem("password");
        setArray((array) => [...array, obj]);
        setName("");
        setPassword("");
        alert("successfully registred");
      }
    }
  };

所以首先if 语句将确保提供名称和密码。然后在else 语句中首先if 检查将确保具有相同name 的用户不存在于数组中。如果您愿意，您可以调用changeState 而不是alert，但我不确定您通过将setFound 设置为true 或false 究竟想要达到什么目的。