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 rows. How can I fetch data in useEffect, then manipulate it (i.e. use .map to change values), and assign to state variable?
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");
setUsers(prev=>[...prev,res.data])
} catch (err) {
console.log(err);
}
fetchData();
};
});
return <div className="datacollect">
<div className="user">hello, length is: {users.length}</div>
</div>;
};
export default Datacollect;