OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

React useEffect returning duplicate data when setting state variables [duplicate]

  • Thread starter Thread starter Clouseau
  • Start date Start date
C

Clouseau

Guest
I am attempting to fetch data from my database using useEffect, then manipulate the data and add it to a state variable. Below is an example.

However, I am getting duplicate data. How can I fetch data in useEffect, then manipulate it (i.e. use .map to change values), and assign to state variable?

To give more context, I am just using the api above as an example. My end goal is to get data from database and manipulate into a new structure afterwards:

Code:
import React, { useEffect, useState } from "react";
import axios from "axios";

const Datacollect = () => {
  // init state for userInfo
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await axios.get("https://jsonplaceholder.typicode.com/comments");
        const newObjStructure = {
            firstUser:null,
            secondUser:null,
            thirdUser:null
        }
        res.data.map(x=>{
            if(x.id===1){
                newObjStructure['firstUser']=x.id;
            } else if (x.id===2) {
                newObjStructure['secondUser']=x.id
            }else if (x.id===3) {
                newObjStructure['thirdUser']=x.id
            }
        })
        setUsers(prev=>[...prev,newObjStructure])
      } catch (err) {
        console.log(err);
      }
      fetchData();
    };
  }, []);
  return <div className="datacollect">
    <div className="user">hello, length is: {users.length}</div>
  </div>;
};

export default Datacollect;

<p>I am attempting to fetch data from my database using useEffect, then manipulate the data and add it to a state variable. Below is an example.</p>
<p>However, I am getting duplicate data. How can I fetch data in useEffect, then manipulate it (i.e. use .map to change values), and assign to state variable?</p>
<p>To give more context, I am just using the api above as an example. My end goal is to get data from database and manipulate into a new structure afterwards:</p>
<pre><code>import React, { useEffect, useState } from "react";
import axios from "axios";

const Datacollect = () => {
// init state for userInfo
const [users, setUsers] = useState([]);

useEffect(() => {
const fetchData = async () => {
try {
const res = await axios.get("https://jsonplaceholder.typicode.com/comments");
const newObjStructure = {
firstUser:null,
secondUser:null,
thirdUser:null
}
res.data.map(x=>{
if(x.id===1){
newObjStructure['firstUser']=x.id;
} else if (x.id===2) {
newObjStructure['secondUser']=x.id
}else if (x.id===3) {
newObjStructure['thirdUser']=x.id
}
})
setUsers(prev=>[...prev,newObjStructure])
} catch (err) {
console.log(err);
}
fetchData();
};
}, []);
return <div className="datacollect">
<div className="user">hello, length is: {users.length}</div>
</div>;
};

export default Datacollect;
</code></pre>
 

Latest posts

Top