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

Kode ini tidak berfungsi dengan baik, saya ingin menunjukkan kotak peringatan hanya sekali tetapi itu menunjukkan sesuai dengan jumlah objek di Array. Saya ingin ia memeriksa semua nilai array sekaligus dengan fungsi peta dan memberikan respons baik menggunakan riwayat atau kotak peringatan. Tapi itu menampilkan kotak peringatan untuk nilai-nilai yang tidak cocok dan kemudian menjalankan useHistory yang nilainya cocok.

0
Mian Danial 18 Mei 2021, 09:44

1 menjawab

Jawaban Terbaik

Isu

Sepertinya Anda lebih ingin mencari status data untuk email yang cocok dan menavigasi jika ditemukan, atau memunculkan peringatan jika tidak. Ini bukan untuk Array.prototype.map. Pemetaan adalah untuk memetakan larik sumber ke larik baru dengan panjang yang sama. Apa yang dilakukan kode Anda adalah mencoba menavigasi atau memperingatkan untuk setiap elemen dalam larik sumber.

Larutan

Gunakan Array.prototype.some untuk menelusuri larik data untuk elemen beberapa yang cocok dengan kondisi, dan menavigasi atau menampilkan peringatan secara kondisional.

const checkEmail = () => {
  const hasEmailMatch = data.some(d => user.email === d.email);
  if (hasEmailMatch) {
    history.push('/home');
  }
  alert(`User does not exist!`);
}
2
Drew Reese 18 Mei 2021, 07:01