on page load event Fetch data is not working In React-CodePudding

First time when my page loaded then my app total lost page. but when I comments my array /*ClientsList.map(item => so on */ which is displaying data then page loaded. then I uncomments my array then data displayed successfully and app run. Again If I refresh my page then app lost.

 const [ClientsList, setUsersList] = useState({}); 

  React.useEffect(() => {
       
        let BaseURL = 'https://******.com/taxplanner/rest-apis/users/clientslist';
              
            fetch(BaseURL, {
                method: 'POST',
                data: {id:loggedIn}
                })
                .then((response) => response.json())
                .then((res) => {
                
                 setUsersList(res.clients);
                   
                      })
                .catch((error) => {
                 console.log(error);
                
              });

      }, [""]);

    return (
       <>
         
             <List type="unstyled" className="p-0 text-left bg-white">
                {
                    /* when I comments my following array*/

                              ClientsList.map(item =>
                          
                              <li className="my-2">
                                <a
                                  className="allFormTitle"
                                  
                                  href="#pablo"
                                  onClick={(e) => {
                                    e.preventDefault();
                                    setSingleClient(item);
                                  }}
                                >
                                  {item.first_name  ' '  item.last_name}
                                </a>
                              </li>
                            )
                      }
              </List>
          </>
         )

My Array Object is like this

 [
  {
    "id": 1,
    "first_name": "Mohammad",
    "last_name": "Shafique",
    "project_title": "[email protected]",
    "business_name": "Attarisoft",
    "street_address": "*****",
    "city": "Faisalabad",
    "state": "Alaska",
    "zip": "48000",
    "phone": " 923238383992",
    "dependents": 25,
    "registration_date": "2022-09-28 15:23:28",
    "status": 1
},
{
    "id": 2,
    "first_name": "Mohammad",
    "last_name": "Ateeq Raza",
    "project_title": "*****@gmail.com",
    "business_name": "Abuateeq",
    "street_address": "*****",
    "city": "Faisalabad",
    "state": "Alabama",
    "zip": "48000",
    "phone": " 923238383992",
    "dependents": 25,
    "registration_date": "2022-09-28 15:23:28",
    "status": 1
},

]

//////////////////////////////////////// I am trying a lot but not resolved my issue . please help to resolve my problem with thanks Regards

CodePudding user response：

The problem is with your initial value of the ClinetsList state. the inital value is an empty object but you're trying to execute .map function on it.

So your app will crash. In order to fix it, change the initial value to an empty array:

const [ClientsList, setUsersList] = useState([]);

There is another problem in your useEffect dependency. It should be an empty array ([]) and not ([""]) in order to be executed only 1 time:

React.useEffect(() => {
       
  let BaseURL = 'https://******.com/taxplanner/rest-apis/users/clientslist';
              
  fetch(BaseURL, {
    method: 'POST',
    data: {id:loggedIn}
  })
  .then((response) => response.json())
  .then((res) => {
    setUsersList(res.clients);                
  })
  .catch((error) => {
    console.log(error);
  });
}, []);

And also it's better to have same names for your state and setState function like this:

const [usersList, setUsersList] = useState([]);

CodePudding user response：

Resolved this one to change this

 const [ClientsList, setUsersList] = useState({});

To const [ClientsList, setUsersList] = useState([]);

This direction given by

https://stackoverflow.com/users/17565505/script0 thanks a lot