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

Question

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。

Answer 1

问题

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

解决方案

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

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

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

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

javascript

reactjs

alert

map-function

问题

解决方案