通过 map 函数检查数组中的值并仅显示一次警告框

Checking value in array by map function and also displaying alert box just once

import React, { useState, useEffect } from 'react';
import './Login.css';
import { Link, useHistory } from 'react-router-dom';
import axios from 'axios';

function Login() {

    var history = useHistory()
    const [data, setData] = useState([])
    const [user, setUser] = useState({
        email: "",
        password: ""
    });

    const onEmailChange = e => {
        setUser({ ...user, [e.target.name]: e.target.value });
    };
    const onPasswordChange = e => {
        setUser({ ...user, [e.target.name]: e.target.value });
    };

    useEffect(() => {
        getUsers()
    }, [])
    const getUsers = async () => {
        try {
            const Data = await axios.get(`http://localhost:3003/users`)
            setData(Data.data)
        } catch (error) {
            alert(`please wait! ${error}`)
        }
    }

    const checkEmail = () => {
        data.map(d => {
            if(user.email === d.email){
                return(history.push('/home')
            }
            else{
                return(alert(`User does not exist!`))
            }
        })

    }

    const onSubmit = e => {
        e.preventDefault();
        checkEmail()

    };



    return (
        <div className="container">
            <div className="w-75 mx-auto shadow p-5">
                <h2 className="text-center mb-4">Add A User</h2>
                <form onSubmit={e => onSubmit(e)}>
                    <div className="form-group">
                        <input
                            type="email"
                            className="form-control form-control-lg"
                            placeholder="Enter Your E-mail Address"
                            name="email"
                            onChange={e => onEmailChange(e)}
                        />
                    </div>
                    <div className="form-group">
                        <input
                            type="password"
                            className="form-control form-control-lg"
                            placeholder="Enter Your password"
                            name="password"
                            onChange={e => onPasswordChange(e)}
                        />
                    </div>
                    <button className="btn btn-primary btn-block">Login</button>
                </form>
            </div>
        </div>
    )
}

export default Login

此代码运行不佳,我想只显示一次警告框,但它根据数组中的对象数显示。我希望它通过映射函数一次检查所有数组值,并使用历史记录或警告框给出响应。但它会为那些不匹配的值显示一个警告框,然后运行值匹配的 useHistory。

问题

您似乎更想在 data 状态中搜索匹配的电子邮件,如果找到则导航,如果找不到则弹出警报。这不是 Array.prototype.map 的目的。映射用于将源数组映射到等长的new数组。您的代码所做的是尝试为源数组中的每个 元素导航或警告

解决方案

使用Array.prototype.somedata数组中搜索一些符合条件的元素,并有条件地导航或显示警报。

const checkEmail = () => {
  const hasEmailMatch = data.some(d => user.email === d.email);
  if (hasEmailMatch) {
    history.push('/home');
  }
  alert(`User does not exist!`);
}