Javascript 通过映射函数检查数组中的值，并仅显示一次警报框 import React，{useState，useffect}来自“React”； 导入“./Login.css”； 从“react router dom”导入{Link，useHistory}； 从“axios”导入axios； 函数登录（）{ var history=useHistory（） const[data，setData]=useState（[]） const[user，setUser]=useState({ 电邮：“， 密码：“ }); const onEmailChange=e=>{ setUser（{…user[e.target.name]：e.target.value}）； }; const onPasswordChange=e=>{ setUser（{…user[e.target.name]：e.target.value}）； }; useffect（（）=>{ getUsers（） }, []) const getUsers=async（）=>{ 试一试{ const Data=等待axios.get(`http://localhost:3003/users`) setData（Data.Data） }捕获（错误）{ 警报（`please wait！${error}`） } } const checkEmail=（）=>{ data.map（d=>{ 如果（user.email==d.email）{ 返回（history.push（“/home”） } 否则{ 返回（警报（`User不存在！`）） } }) } const onSubmit=e=>{ e、 预防默认值（）； checkEmail（） }; 返回( 添加用户 onSubmit（e）}> onEmailChange（e）} /> onPasswordChange（e）} /> 登录 ) } 导出默认登录名

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

问题 似乎您更希望在

数据

状态中搜索匹配的电子邮件，如果找到，则导航，如果没有，则弹出警报。这不是

数组.prototype.map

的目的。映射是将源数组映射到长度相等的新的数组。您的代码所做的是尝试为源数组中的每个元素设置vigate或alert

解决方案 使用

Array.prototype.some

在

data

数组中搜索与条件匹配的某些元素，并有条件地导航或显示警报

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

问题 似乎您更希望在

数据

状态中搜索匹配的电子邮件，如果找到，则导航，如果没有，则弹出警报。这不是

数组.prototype.map

的目的。映射是将源数组映射到长度相等的新的数组。您的代码所做的是尝试为源数组中的每个元素设置vigate或alert

解决方案 使用

Array.prototype.some

在

data

数组中搜索与条件匹配的某些元素，并有条件地导航或显示警报

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