We Keep Coding

React useEffect fetch hook makes endless calls despite array parameter

My code is meant to render a new list whenever the task state changes. In terms of what the function is meant to do, it works--displaying my list of tasks upon state change. However, it runs endlessly even before state change, causing the computer to overheat.
If I use an empty array instead, the infinite calls stop, but I have to refresh the page for changes to register. Here's the code:
in Context.jsx:
const [task, setTask] = React.useState([
{
title: "",
},]);
in InputTask.jsx: a button triggers handleClick. This is how tasks are added to my backend.
function handleClick(e) {
const newTask = {
title: input,
};
axios.post("http://localhost:3001", newTask);
console.log(task);
setInput("");
}
in Task.jsx
useEffect(() => {
fetch("http://localhost:3001")
.then((res) => {
if (res.ok) {
return res.json();
}
})
.then((jsonRes) => setTask(jsonRes))
.catch(err => console.log(err))
}, [task]);
return (
<ul>
{task.map((task, index) => {
return (
<div className="task" key={index}>
<button className="task-button" onClick={() => handleDelete(task._id)}></button>
<h3>{task.title}</h3>
</div>
);
})}
</ul>
);

When you make a post request return the updated tasks in response and update it at the same instant.
async function handleClick(e) {
const newTask = {
title: input,
};
const res = await axios.post("http://localhost:3001", newTask);
if(res.data.task){
setTask(res.data.task); // your res should have task
}
setInput("");
}
No need to use useEffect for updating the task list on the front-end.

how to deal with [.map is not a function]

I'm learning React Framework. When i try to fetch from my api using setState .map function dont work. It render "data.map is not a function"
This is the only Method i know:
constructor(props) {
super(props);
this.state = {
name: "secret",
email: "secret",
datas: []
};
}
componentDidMount() {
const { name, password} = this.state;
fetch(
`http://localhost:3000/api/user/account?username=${username}&email=${email}`
)
.then(res => res.json())
.then(getdata => {
this.setState({ datas: getdata });
})
.catch(err => console.log(err));
}
render() {
const { datas } = this.state;
const repoItems = datas.map(data => (
<div key={data.id}>
<p>{data.name}</p>
<p>{data.email}</p>
</div>
));
return (
<div>
{datas}
</div>
);
}
Did I wrote my code wrong or is there any other method beside from this

From the top view everything seems fine with your code. map will only run on arrays and I can see that you are setting default state to array as well. However the problem may lies when you attempt to set the state after getting response from fetch call
fetch(
`http://localhost:3000/api/user/account?username=${username}&email=${email}`
)
.then(res => res.json())
.then(getdata => {
this.setState({ datas: getdata });
})
.catch(err => console.log(err));
Here you need to make sure that whatever you are setting data, it should be an array. So in case you are not getting the array in the response set the value which is actually an array and in case the response is empty set an empty array in state instead, something like below
// may be array is a property of response
this.setState({ datas: getdata.array });
// may be getdata is empty
this.setState({ datas: getdata || [] });

ComponentWillReceiveProps giving multiples calls. React

I have a big problem with the ComponentWillReceiveProps.
What happens?
I have the three components, that i pass the props from component 1 to component 2 and of the component 2 i pass to component 3, where is really used..
Basically is: I pass the props of the component 1 to use in the component 3
In the component 3, i make an ajax call with the news props using ComponentWillReceiveProps. But when i pass the props it makes multiples ajax instead just one..
I dont know why.. Can someone help me?
Component 1:
render() {
return (
<Router>
<Route exact path = "/"
render = {
(props) =>
<Overview
{ ...props}
domainStatusFiltered = {
this.state.domainStatusFiltered
}
subdomainStatusFiltered = {
this.state.subdomainStatusFiltered
}
managerStatusFiltered = {
this.state.managerStatusFiltered
}
countryStatusFiltered = {
this.state.countryStatusFiltered
}
cityStatusFiltered = {
this.state.cityStatusFiltered
}
squadNameStatusFiltered = {
this.state.squadNameStatusFiltered
}
/>} / >
)
}
Component 2:
render(){
return (
<TwoColumnGrid>
<Module className="mt-2" title="Team Status">
<TeamStatus
domainStatusFiltered={this.props.domainStatusFiltered}
subdomainStatusFiltered={this.props.subdomainStatusFiltered}
managerStatusFiltered={this.props.managerStatusFiltered}
countryStatusFiltered={this.props.countryStatusFiltered}
cityStatusFiltered={this.props.cityStatusFiltered}
squadNameStatusFiltered={this.props.squadNameStatusFiltered} />
</Module>
</TwoColumnGrid>
)
}
In the Component 3, i do a verify of the user logged and make the ajax according to your level:
componentWillReceiveProps(props) {
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `${firstName} ${lastName}`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full') {
axios.get(`/api/squadsPeopleAll/${props.managerStatusFiltered}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadNameStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
.then(res => {
const getIds = res.data.map(i => i.id);
const people = Object.keys(getIds).length;
const getSquad = res.data.map(i => i.squad_name);
const unicSquads = Array.from(new Set(getSquad));
const squads = Object.keys(unicSquads).length;
this.setState({
people,
squads
})
})
.catch(err => console.log(err))
axios.get(`/api/wfmskills/${props.managerStatusFiltered}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
.then(res => {
this.setState({
totalSkills: res.data.count,
loading: false
})
})
axios.get(`/api/notupdated/${props.managerStatusFiltered}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
.then(res => {
this.setState({
totalNotUpdated: res.data.count
})
})
axios.get(`/api/updated2017/${props.managerStatusFiltered}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
.then(res => {
this.setState({
updated2017: res.data.count
})
})
axios.get(`/api/updated2016/${props.managerStatusFiltered}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
.then(res => {
this.setState({
updated2016: res.data.count
})
})
axios.get(`/api/updated2018/${props.managerStatusFiltered}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
.then(res => {
this.setState({
updated2018: res.data.count
});
})
}
if (loggedUserIs === 'L4') {
axios.get(`/api/squadsPeopleManager/${fullName}/${this.state.cityStatusFiltered}/${this.state.countryStatusFiltered}/${this.state.squadNameStatusFiltered}/${this.state.domainStatusFiltered}/${this.state.subdomainStatusFiltered}`)
.then(res => {
console.log(res.data)
const getIds = res.data.map(i => i.id);
const people = Object.keys(getIds).length;
const getSquad = res.data.map(i => i.squad_name);
const unicSquads = Array.from(new Set(getSquad));
const squads = Object.keys(unicSquads).length;
this.setState({
people,
squads
})
})
.catch(err => console.log(err))
axios.get(`/api/wfmskills/manager/${fullName}`)
.then(res => {
this.setState({
totalSkills: res.data.count
})
})
axios.get(`/api/notupdated/manager/${fullName}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
.then(res => {
this.setState({
totalNotUpdated: res.data.count
})
})
axios.get(`/api/updated2017/manager/${fullName}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
.then(res => {
this.setState({
updated2017: res.data.count
})
})
axios.get(`/api/updated2016/manager/${fullName}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
.then(res => {
this.setState({
updated2016: res.data.count
})
})
axios.get(`/api/updated2018/manager/${fullName}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
.then(res => {
this.setState({
updated2018: res.data.count
}, () => this.setState({
loading: false
}));
})
}
}
The problem is, for example: If I give the setState only in subdomainStatusFiltered it from multiple ajax calls and returns the result several times, I did a test and put a console.log ('test') it is rendered several times, I do not know why, or I'm using the wrong method and I do not know, look that it rerender several times... I just want to call a single time when I change some state, can someone help me, please?

You can use componentDidMount()
componentDidMount() {
// here you can use your API calls with this.props
}
If still you want use componentWillReceiveProps then you can do as below:
componentWillReceiveProps(nextProps) {
if(!this.props.managerStatusFiltered && nextProps.managerStatusFiltered){
// now you can use nextProps.managerStatusFiltered
}
}

First, have you compare props with nextProps to make sure props was different? componentWillReceiveProps does not guarantee the props was different. Instead, it'll be invoked everytime your component needs to re-render.
And secondly, I think the best way to do it is moving the async calls to the top level component and passing the response data to children that need it. This way you can avoid complex state check.

If you want events to occur once and only once over the lifetime of a React component, you should use componentDidMount.
Please note that componentWillReceiveProps is a legacy lifecycle method and should not be used anymore in new projects. This method will soon only be available with the UNSAFE_ prefix when React 17 will be released. From the react documentation:
UNSAFE_componentWillReceiveProps(nextProps)
Note:
Using this lifecycle method often leads to bugs and inconsistencies,
and for that reason it is going to be deprecated in the future.
If you need to perform a side effect (for example, data fetching or an
animation) in response to a change in props, use componentDidUpdate
lifecycle instead.

Rendering List with Fetch in React

Trying to render a list of movies from a random API and eventually filter them.
componentDidMount() {
var myRequest = new Request(website);
let movies = [];
fetch(myRequest)
.then(function(response) { return response.json(); })
.then(function(data) {
data.forEach(movie =>{
movies.push(movie.title);
})
});
this.setState({movies: movies});
}
render() {
console.log(this.state.movies);
console.log(this.state.movies.length);
return (
<h1>Movie List</h1>
)
}
If I render this I can only print my state and not access what is inside.
How would I create a list of LIs and render a UL?
Thanks

A few things. fetch is asynchronous, so you're essentially just going to be setting movies to an empty array as this is written. If data is an array of movies, you can just set that directly in your state rather than copying it to a new array first. Finally, using an arrow function for the final callback in the promise will allow you to use this.setState without having to explicitly bind the function.
Finally, you can use JSX curly brace syntax to map over the movies in your state object, and render them as items in a list.
class MyComponent extends React.Component {
constructor() {
super()
this.state = { movies: [] }
}
componentDidMount() {
var myRequest = new Request(website);
let movies = [];
fetch(myRequest)
.then(response => response.json())
.then(data => {
this.setState({ movies: data })
})
}
render() {
return (
<div>
<h1>Movie List</h1>
<ul>
{this.state.movies.map(movie => {
return <li key={`movie-${movie.id}`}>{movie.name}</li>
})}
</ul>
</div>
)
}
}

First of all, since fetch is asynchronous, you will most likely call setState before the fetch call has completed, and you obviously don't want to do that.
Second, if the data returned is an array of movies, do not iterate over it, just assign the array altogether to the movies state variable.
So, in short, this is what your componentDidMount method should look like :
componentDidMount() {
var myRequest = new Request(website);
fetch(myRequest)
.then(res => res.json())
.then(movies =>
this.setState({ movies }) // little bit of ES6 assignment magic
);
}
Then in your render function you can do something like:
render() {
const { movies } = this.state.movies;
return (
<ul>
{ movies.length && movies.map(m => <li key={m.title}>{m.title}</li>) }
</ul>
);
}

Gotten your movies in state you can do the next to render the list of movies:
render() {
return (
<h1>Movie List</h1>
<ul>
{
this.state.movies.map((movie) =>
<li key={movie}>movie</li>
)
}
</ul>
);
}

React .map is not a function

I'm trying to learn React and I'm a beginner when it comes to Javascript. Right now I'm working on an app that is fetching data from Flickr's API. The problem is that when I try to use the map method on the props in the Main.js component I get an error saying "Uncaught TypeError: this.props.photos.map is not a function". After searching here on Stackoverflow I think the problem is that this.props are javascript objects and not an array. The problem is that I can't figure out how to make it an array. Can anyone explain what I'm doing wrong?
My code:
class App extends Component {
constructor() {
super();
this.state = {
}
}
componentDidMount() {
let apiKey = 'xxxxxxxxxxxxxxxxxx';
let searchKeyword = 'nature';
let url = `https://api.flickr.com/services/
rest/?api_key=${apiKey}&method=flickr.photos.
search&format=json&nojsoncallback=1&&per_page=50
&page=1&text=${searchKeyword}`;
fetch(url)
.then(response => response.json())
.then(data => data.photos.photo.map((x) => {
this.setState({
farm: x.farm,
id: x.id,
secret: x.secret,
server: x.server})
// console.log(this.state)
}))
}
render() {
return (
<div className="App">
<Header />
<Main img={this.state.photos} />
<Navigation />
</div>
);
}
}
export default class Main extends Component {
render() {
return(
<main className="main">
{console.log(this.props.photos)}
</main>
)
}
}
Edit:
Why is this.props.img undefined first?
Screen shot from console.log(this.props.img)

fetch(url)
.then(response => response.json())
.then(data => data.photos.photo.map((x) => {
this.setState({
farm: x.farm,
id: x.id,
secret: x.secret,
server: x.server})
}))
What is happening is that your map function in your promise is resetting the component's state for every photo that is returned. So your state will always be the last object in your list of returned photos.
Here is a more simplified example of what I am referring to
const testArray = [1,2,3,4];
let currentState;
testArray.map((value) => currentState = value)
console.log(currentState);
What you want to do is this
const testArray = [1,2,3,4];
let currentState;
//Notice we are using the return value of the map function itself.
currentState = testArray.map((value) => value)
console.log(currentState);
For what you are trying to accomplish, you want your state to be the result of the map function (since that returns an array of your results from the map). Something like this:
fetch(url)
.then(response => response.json())
.then(data =>
this.setState({
photos:
data.photos.photo.map((x) => ({
farm: x.farm,
id: x.id,
secret: x.secret,
server: x.server
}))
})
)

This error might also happen if you try to provide something else other than the array that .map() is expecting, even if you declare the variable type properly. A hook-based example:
const [myTwinkies, setMyTwinkies] = useState<Twinkies[]>([]);
useEffect(() => {
// add a twinky if none are left in 7eleven
// setMyTwinkies(twinkiesAt711 ?? {}); // ---> CAUSES ".map is not a function"
setMyTwinkies(twinkiesAt711 ?? [{}]);
}, [twinkiesAt711, setMyTwinkies]);
return (<ul>
{myTwinkies.map((twinky, i)=> (
<li key={i}>Twinky {i}: {twinky?.expiryDate}</li>
))}
</ul>)

Just check the length of the array before going for the map. If the len is more than 0 then go for it, otherwise, ignore it.
data.photos.photo.map.length>0 && data.photos.photo.map(........)