const API_URL = 'http://www.omdbapi.com/?i=tt3896198&apikey=caca2ca6';
const App = () => {
const searchMovies = async (title) => {
const response = await fetch(`${API_URL}&s=${title}`);
const data = await response.json();
console.log(data.Search);
}
useEffect=(() => {
searchMovies('Batman');
}, []);
return(
<h1>Apppi</h1>
);
}
export default App;
the code above should show the movies title in the api on console, the tutorial im watching has title showed up. Can someone solve this for me? Thanks
there is syntax error in useEffct
remove = between useEffect and parentheses
useEffect(() => {
searchMovies('Batman');
}, []);
please always call the API in try-catch, this way your app will not crash and you may log error and you have to remove the = in useEffect before paranthesis.
const API_URL = 'http://www.omdbapi.com/?i=tt3896198&apikey=caca2ca6';
const App = () => {
const searchMovies = async (title) => {
try {
const response = await fetch(`${API_URL}&s=${title}`);
const data = await response.json();
console.log(data.Search);
} catch (error) {
console.log("error", error)
}
}
useEffect(() => {
searchMovies('Batman');
}, []);
return(
<h1>Apppi</h1>
);
}
export default App;
Related
For my posts
in component AboutUsers.jsx
const [users, setUsers] = useState([]);
if I write like this, it's working, I see posts in users:
in component AboutUsers.jsx
useEffect(()=> {
const getUsers = axios.get('https://jsonplaceholder.typicode.com/todos',{
params:{
_limit:limitPage,
_page:currentPage
}
})
.then(response => setUsers(response.data))
},[])
but I created other component PostMyServise.js with:
export default class PostMyServise {
static async getPost(limit=10, page=1) {
const result = await axios.get('https://jsonplaceholder.typicode.com/todos',{
params: {
_limit: limit,
_page: page,
}
})
.then(response => {
return response
})
return result;
}
}
And one yet component useCreatePosts.js:
export const usePosts = (callback) => {
const [isTrue, setIsTrue] = useState('')
const [error, setError] = useState('')
const createPost = async () => {
try {
setIsTrue(false);
await callback;
} catch (e) {
setError(e.message);
} finally {
setIsTrue(true);
}
}
return [createPost, isTrue, error];
}
export default usePosts;
I wrote this, and I see empty array in console.log(users):
I don't understand why array is empty
const [createPost, isTrue, error] = usePosts (async ()=> {
const response = await PostMyServise.getPost(limitPage, currentPage);
setUsers(response.data)
})
useEffect(() => {
createPost();
},[currentPage])
You are not calling the callback. You need to add the parentheses.
const createPost = async () => {
try {
setIsTrue(false);
await callback();
} catch (e) {
setError(e.message);
} finally {
setIsTrue(true);
}
}
I feel like something about your code is over-engineered and too complex but that's outside the scope of the question. This change will at least get it working. Also, I suggest changing the name of isTrue and setIsTrue to something more meaningful as those names do not tell you what they are for.
I'm following a mern course. As the guy fetches movie data from backend to react app. But when he logout from homepage, his console showed many error. While mine shows none. What can be the reason to it? As it will cause me huge trouble in future if my console doesn't show such errors. The errors are of memory leaks as he didn't use cleanup function for fetchMovies() function.
image of his console
function TopRatedMovies() {
const { updateNotification } = useNotification();
const [movies, setMovies] = useState([]);
const fetchMovies = async () => {
const { movies, error } = await getTopRatedMovies();
if (error) return updateNotification("error", error);
setMovies([...movies]);
};
useEffect(() => {
fetchMovies();
}, []);
return <MovieList movies={movies} title="Viewers Choice (Movies)" />;
}
export const getTopRatedMovies = async (type) => {
try {
let endpoint = "/movie/top-rated";
if (type) endpoint = endpoint + "?type=" + type;
const { data } = await client(endpoint);
return data;
} catch (error) {
console.log(error);
const { response } = error;
return { error: response?.data.msg };
}
};
You can try to wrap fetchMovies by useCallback and add dependencyfetchMovies for useEffect :
function TopRatedMovies() {
const { updateNotification } = useNotification();
const [movies, setMovies] = useState([]);
const fetchMovies = useCallback(async () => {
const { movies, error } = await getTopRatedMovies();
if (error) return updateNotification("error", error);
setMovies([...movies]);
}, [])
useEffect(() => {
fetchMovies();
}, [fetchMovies]);
return <MovieList movies={movies} title="Viewers Choice (Movies)" />;
}
If still the error, can you show your useNotification hook?
I'm making a Quiz app, using API from (Trivia api),
Issues is - As soon as the api call is made the state is changes 3 times and my UI data changes 2 times in 1 second.
I think the issue is related to useEffect even though i'm adding empty dependency in useEffect.
can anybody explain why is it happening?
Layout.js
import { useEffect, useState } from 'react'
import { Outlet } from 'react-router-dom'
import Header from '../Componenets/Header/Header'
import ProgressBar from '../Componenets/ProgressBar/ProgressBar'
import QuizMain from '../Componenets/QuizMain/QuizMain'
function Layout() {
const [questionAre, setQuestionsAre] = useState([])
const [currentQuestion, setCurrentQuestion] = useState(0)
const changeCurrentQuestion = (value) => {
setCurrentQuestion(value)
}
useEffect(() => {
const QuizFetch = async () => {
try {
const res = await fetch(
'https://the-trivia-api.com/api/questions?categories=food_and_drink,general_knowledge&limit=10®ion=AU&difficulty=easy',
)
const data = await res.json()
const transformData = data.map((item) => {
const newarray = item.incorrectAnswers
return {
options: newarray,
question: item.question,
correctAnswer: item.correctAnswer,
}
})
setQuestionsAre(transformData)
} catch (err) {
console.log(err, 'err in getting data')
}
}
QuizFetch()
}, [])
return (
<div className="Layout">
<Header />
<ProgressBar
changeCurrentQuestion={changeCurrentQuestion}
currentQuestion={currentQuestion}
questionAre={questionAre}
/>
{/* <QuizMain
changeCurrentQuestion={changeCurrentQuestion}
currentQuestion={currentQuestion}
questionAre={questionAre} /> */}
<Outlet context={[changeCurrentQuestion, currentQuestion, questionAre]} />
</div>
)
}
export default Layout
Since react 18 and the lifecycle in dev mode you have to use the abortController.
The signal will jump to the catch and then you will only have one successfull api call
useEffect(() => {
const abortController = new AbortController();
const QuizFetch = async () => {
try {
const res = await fetch(
'https://the-trivia-api.com/api/questions?categories=food_and_drink,general_knowledge&limit=10®ion=AU&difficulty=easy',
{
signal: abortController.signal,
},
)
const data = await res.json()
const transformData = data.map((item) => {
const newarray = item.incorrectAnswers
return {
options: newarray,
question: item.question,
correctAnswer: item.correctAnswer,
}
})
setQuestionsAre(transformData)
} catch (err) {
if (abortController.signal.aborted) return;
console.log(err, 'err in getting data')
}
}
QuizFetch()
return () => {
abortController.abort();
};
}, [])
I'm currently trying to understand how to work with async/await in React JS. In this demo app, I'm trying to get full border names of the chosen country by calling https://restcountries.eu/. I make first API call to get info about country and the second one to get full name of its borders since first API call returns
only short border names. I believe there is a way to combine those calls inside one useEffect however everything I tried gave me some sort of an error or getting stuck in infinite loop. What is the proper way to combine those calls with async/await approach?
import React, { useState, useEffect } from "react";
import Axios from "axios";
const App = () => {
const [loading, setLoading] = useState(true);
const [country, setCountry] = useState({});
const [fullBorderNames, setFullBorderNames] = useState([]);
//FIRST API CALL
useEffect(() => {
const source = Axios.CancelToken.source();
const fetchData = async () => {
setLoading(true);
try {
const response = await Axios(
`https://restcountries.eu/rest/v2/name/canada?fullText=true`,
{ cancelToken: source.token }
);
setCountry(response.data[0]);
} catch (err) {
if (Axios.isCancel(err)) {
console.log("Axios canceled");
} else {
console.log(err);
}
}
};
fetchData();
return () => source.cancel();
}, []);
//SECOND API CALL
useEffect(() => {
const source = Axios.CancelToken.source();
let borders = [];
if (country.borders) {
const fetchData = async () => {
try {
country.borders.forEach(async border => {
const response = await Axios(
`https://restcountries.eu/rest/v2/alpha?codes=${border}`,
{ cancelToken: source.token }
);
borders.push(response.data[0].name);
if (borders.length === country.borders.length)
setFullBorderNames(borders);
});
} catch (err) {
if (Axios.isCancel(err)) {
console.log("Axios canceled");
} else {
console.log(err);
}
}
setLoading(false);
};
fetchData();
}
return () => source.cancel();
}, [country.borders]);
if (loading) {
return <h2>Loading</h2>;
} else {
return (
<>
<pre>{JSON.stringify(country, null, 2)}</pre>
<pre>{JSON.stringify(fullBorderNames, null, 2)}</pre>
</>
);
}
};
export default App;
You can simply just make the requests right after the first one.
try {
const response = await Axios(`https://restcountries.eu/rest/v2/name/canada?
fullText=true`, { cancelToken: source.token });
const country = response.data[0];
setCountry(country);
/* all the other fetch calls*/
Can you tell me what kind of errors you get because I don't see an issue with doing them in the same useEffect? It just gets a little messy which can be refactored anyway.
I am executing useEffect() to update a state with JSON data. However the fetch request sometimes fails, so I want to re-execute the useEffect hook if that happens:
...
import React, {useState, useEffect} from 'react';
import {getJsonData} from './getJsonData';
const myApp = () => {
var ErrorFetchedChecker = false;
const [isLoading,setIsLoading] = useState(true);
const [data,setData] = useState(null);
const updateState = jsonData => {
setIsloading(false);
setData(jsonData);
};
useEffect(() => {
//console.log('EXECUTING');
getJsonData().then(
data => updateState(data),
error => {
Alert.alert('DATA FETCHING ERROR !', 'Refreshing ?...');
ErrorFetchedChecker = !ErrorFetchedChecker;
//console.log('LOG__FROM_CountriesTable: Executed');
},
);
}, [ErrorFetchedChecker]);//Shouldn't the change on this variable
//be enough to re-execute the hook ?
return (
<View>
<Text>{state.data.title}</Text>
<Text>{data.data.completed}</Text>
</View>
);
}
Here's the getJsonData() function just in case:
export async function getJsonData() {
try {
let response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
let responseJson = await response.json();
return responseJson;
} catch (error) {
throw error;
// Also, is this the correct way to handle the error ?
// As the Alert in useEffect goes off either ways.
// If not, advise me on how the error should be handled.
}
}
This will work
const myApp = () => {
const [errorFetchedChecker, setErrorFetchedChecker] = useState(false);
const [isLoading,setIsLoading] = useState(true);
const [data,setData] = useState(null);
const updateState = jsonData => {
setIsloading(false);
setData(jsonData);
};
useEffect(() => {
//console.log('EXECUTING');
getJsonData().then(
data => updateState(data),
error => {
Alert.alert('DATA FETCHING ERROR !', 'Refreshing ?...');
setErrorFetchedChecker(c => !c);
//console.log('LOG__FROM_CountriesTable: Executed');
},
);
}, [errorFetchedChecker]);
return (
<View>
<Text>{state.data.title}</Text>
<Text>{data.data.completed}</Text>
</View>
);
}
import React, { useState, useRef, useEffect } from "react";
import { Text, View, TextInput } from "react-native";
const App = () => {
var ErrorFetchedChecker = false;
const [isLoading, setIsLoading] = useState(true);
const [data, setData] = useState(null);
const updateState = (jsonData) => {
setIsLoading(false);
setData(jsonData);
};
useEffect(() => {
//console.log('EXECUTING');
getJsonData()
.then((data) => {
console.log("1. Successful, just received the data from our promise");
updateState(data);
console.log("2. We set our data because we received it successfully");
return { alreadySet: true };
})
.catch((e) => {
console.log("1. We failed to gather data in our initial promise");
console.log("2. Attempting to rerun initial promise");
return getJsonData();
})
.then((data) => {
if (data.alreadySet) {
console.log(
"3. Did not attempt to retry because we are already successful"
);
} else {
console.log("3. Our second attempt succeeded");
updateState(data);
console.log("4. Set our data on our second attempt");
}
})
.catch((e) => {
console.log("3. Both attempts have failed");
});
}, []); //Shouldn't the change on this variable
//be enough to re-execute the hook ?
return (
<View>
<Text>{data ? <Text>{data.title}</Text> : null}</Text>
</View>
);
};
export async function getJsonData() {
try {
let response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
let responseJson = await response.json();
return responseJson;
} catch (error) {
throw error;
// Also, is this the correct way to handle the error ?
// As the Alert in useEffect goes off either ways.
// If not, advise me on how the error should be handled.
}
}
export default App;