如何在反应中的无状态组件中设置状态，多个对象的值？

Question

I am using a stateless component and got value from the json file, When I fetch data using map from json file object, then it will store only last data in state not whole objects:

import React, { useState, useEffect} from 'react'
import usersInformation from '../assets/dataconfig/users.json'

const Login = () => {

const [userEmail, updateEmail] = useState([]);
const [userPassword, updatePassword] = useState([]);

   useEffect(function () {
   const getUserdata = () => {
        usersInformation.authorizedwebusers.map(item => {
            console.log(item);
            updateEmail([...userEmail, item.emailAddress]); // here store only last json data - shiv@gmail.com
            updatePassword([...userPassword, item.emailpassword])
        })
    }
    getUserdata();

}, [])

}

My json save as users.json:

{
 "authorizedwebusers": [
    {
        "name": "Anil",
        "emailAddress": "anil@gmail.com",
        "emailpassword": "123"
    },
    {
      "name": "Lalit",
      "emailAddress": "lalit.kumar@gmail.com",
      "emailpassword": "123"
    },
    {
        "name": "Shiv",
        "emailAddress": "shiv@gmail.com",
        "emailpassword": "123"
    }
  ]
}

Answer 1

You are doing it wrong. setXyz() is not a synchronous action, it takes some time. You need to implement this in a different way. First calculate and then set values.

 useEffect(function () { const getUserdata = () => { const emails = []; const passwords = []; usersInformation.authorizedwebusers.map(item => { console.log(item); emails.push(item.emailAddress); passwords.push(item.emailpassword); }); updateEmail([...userEmail, ...emails]); updatePassword([...userPassword, ...passwords]) } getUserdata(); }, [])