I'm making a project with an API call, and so far I've been able to pass the static data(for know I'll keep it hard coded) and then console.log the data provided by the static data, but I can't store it in my state, I can just console.log it and I dont know why. The following error happens in my console:
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
Here's the code, I think you guys will see what I'm doing in a better way:
import React, { useState } from "react";
import "./styles.css";
import TopList from "./components/TopList";
export default function App() {
const [state, setState] = useState({
data: [23251319, 23251742, 23251158, 2423431],
results: []
});
const fetcher = id => {
fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`)
.then(res => res.json())
.then(data => {
console.log(data);
setState({
results: data
});
});
};
return (
<div>
<TopList data={state.data} fetcher={fetcher} />
</div>
);
}
import React from "react";
import Top from "./Top";
function TopList({ data, fetcher }) {
const mapped = data.map(item => (
<Top fetcher={fetcher} id={item} key={item} />
));
return <div>{mapped}</div>;
}
export default TopList;
import React from "react";
function Top({ id, fetcher }) {
fetcher(id);
return (
<div>
<h1>Hello from top</h1>
</div>
);
}
export default Top;
You should be fetching the data after the component has mounted inside a componentDidMount() lifecycle method or since you are using functional components you can use the useEffect() hook.
Secondly you are prop drilling the fetcher to the Top component for no reason.
If the Top component fetches the data, it should be responsible for calling the fetcher inside a useEffect() hook.
For example
in your app component
export default function App() {
const [ids, setIds] = useState([23251319, 23251742, 23251158, 2423431]);
return (
<div>
<TopList idArray={ids}/>
</div>
);
}
in TopList
function TopList({ idArray }) {
return (
<div>
{
idArray.map((id) => (<Top id={id} key={id}/>))
}
</div>;
}
In Top Component
function Top({ id }) {
const [state, setState] = useState({results: null, error: undefined})
useEffect(() => {
const fetcher = id => {
fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`)
.then(res => res.json())
.then(data => {
console.log(data);
// if fetch success
setState({
results: data,
error: undefined
});
})
.catch(error => {
// if error set results to null and error to the error that happened
// during fetch
setState({results: null, error: error})
});
};
// finally call the fetcher with the id
fetcher(id);
}, [id])
return (
<div>
<h1>Hello from top</h1>
<pre>{state.results && JSON.stringify(state.results, null, 2)}</pre>
</div>
);
}
Related
I wanted to prevent losing state on page refresh while being on a different route path. Im curious why the first example does not work. From what i understand when app mounts first thing that gonna render is component itself and then useEffects run. Since i got 3 here, first fetches and saves the data to the invoiceList state and then next useEffect that run should fill localStorage key with invoiceList state data. The last one obviously retrieve the data.
The second one does fill the "invoiceData" localStorage key with an empty array. Why is this happening if the invoiceList state already have the data after the first useEffect?
The second example that i provided works. I removed second useEffect and set localStorage key in the first useEffect with response data that i get from fetch.
I also wonder if im doing everything correct here. Any feedback appreciated :)
First example (not working):
import { ReactElement, useEffect, useState } from "react";
import { Outlet } from "react-router-dom";
import { Bar } from "../../components/Bar/Bar";
import { Invoice } from "./Root.utils";
type Props = {};
const Root = (props: Props): ReactElement => {
const [invoiceList, setInvoiceList] = useState<Invoice[]>([]);
useEffect(() => {
const fetchData = async () => {
const response = await fetch("./data.json");
const data = await response.json();
setInvoiceList(data);
};
fetchData();
}, []);
useEffect(() => {
window.localStorage.setItem("invoiceData", JSON.stringify(invoiceList));
}, []);
useEffect(() => {
setInvoiceList(
JSON.parse(window.localStorage.getItem("invoiceData") || "[]")
);
}, []);
return (
<div>
<Bar />
<Outlet context={{ invoiceList }} />
</div>
);
};
export default Root;
Second example (working):
import { ReactElement, useEffect, useState } from "react";
import { Outlet } from "react-router-dom";
import { Bar } from "../../components/Bar/Bar";
import { Invoice } from "./Root.utils";
type Props = {};
const Root = (props: Props): ReactElement => {
const [invoiceList, setInvoiceList] = useState<Invoice[]>([]);
useEffect(() => {
const fetchData = async () => {
const response = await fetch("./data.json");
const data = await response.json();
window.localStorage.setItem("invoiceData", JSON.stringify(data));
setInvoiceList(data);
};
fetchData();
}, []);
useEffect(() => {
setInvoiceList(
JSON.parse(window.localStorage.getItem("invoiceData") || "[]")
);
}, []);
return (
<div>
<Bar />
<Outlet context={{ invoiceList }} />
</div>
);
};
export default Root;
The first example is never storing the data into the localStorage because the fetch is an asynchronous function that and you are writing basically always the empty array into your localStorage.
The order of execution in the first example will be:
fetchData called
window.localStorage.setItem("invoiceData", JSON.stringify(invoiceList)); <- still empty array
setInvoiceList(JSON.parse(window.localStorage.getItem("invoiceData") || "[]"));
response.json() called
setInvoiceList(data); called
I would also recommend to improve your code a little like that:
import React, { useEffect, useState } from "react";
import { Outlet } from "react-router-dom";
import { Bar } from "../../components/Bar/Bar";
import { Invoice } from "./Root.utils";
const Root: React.FC = () => {
const [invoiceList, setInvoiceList] = useState<Invoice[]>([]);
useEffect(() => {
setInvoiceList(
JSON.parse(window.localStorage.getItem("invoiceData") || "[]")
);
const fetchData = async () => {
const response = await fetch("./data.json");
const data = await response.json();
window.localStorage.setItem("invoiceData", JSON.stringify(data));
setInvoiceList(data);
};
fetchData();
}, []);
return (
<div>
<Bar />
<Outlet context={{ invoiceList }} />
</div>
);
};
export default Root;
You can use the Link component from react-router and specify to={} as an object where you specify pathname as the route to go to. Then add a variable e.g. data to hold the value you want to pass on. See the example below.
Using the <Link /> component:
<Link
to={{
pathname: "/page",
state: data // your data array of objects
}}
>
Using history.push()
this.props.history.push({
pathname: '/page',
state: data // your data array of objects
})
Using either of the above options you can now access data on the location object as per the below in your page component.
render() {
const { state } = this.props.location
return (
// render logic here
)
}
I'm trying to pass values one by one to a functional component from array.map function. Unfortunately the component is not redering the value.
This is what I'm getting. There are room names stored in DB that should be printed here.
Homescreen.js
import React, { useState, useEffect } from "react";
import axios from "axios";
import Room from "../components/Room";
export default function Homescreen() {
const [rooms, setRooms] = useState([]);
const [loading, setLoading] = useState();
const [error, setError] = useState();
useEffect(async () => {
try {
setLoading(true);
const data = (await axios.get("/api/rooms/getallrooms")).data;
setRooms(data);
setLoading(false);
setError(false);
} catch (error) {
setLoading(false);
setError(true);
console.log(error);
}
}, []);
return (
<div>
{loading ? (
<h1>Loading...</h1>
) : error ? (
<h1>Error fetching details from API</h1>
) : (
rooms.map((room) => {
return (<div>
<Room key={room._id} room={room}></Room>
</div>
)
})
)}
</div>
);
}
Room.js (Funcitonal component that should print room names):
import React from "react";
function Room(room){
console.log(room.name)
return(
<div>
<h1>Room name: {room.name}.</h1>
</div>
)
}
export default Room;
The data is fetched correctly from db because if, instead of passing the value to component I print directly into my main screen, the values are printed.
In otherwords, in Homescreen.js, doing <p>{room.name}</p> instead of <Room key={room._id} room={room}></Room> print room names correctly.
So I reckon the problem is coming when I'm passing the values as props.
Any help is much appreciated. Thanks.
The parameter passed to a function component is the props object which contains the passed props, so you just need to grab props.room from there:
function Room(props){
console.log(props.room.name)
return(
<div>
<h1>Room name: {props.room.name}.</h1>
</div>
)
}
Or, with object destructuring:
function Room({ room }){
console.log(room.name)
return(
<div>
<h1>Room name: {room.name}.</h1>
</div>
)
}
I'm trying to show data from an API call. The structure of the application looks like
MainComponent -> RefreshButton (this will fetch the data)
MainComponent -> ShowData (this will show the data that is being fetched)
MainComponent has a state userData that will store the response that was received from the API. Now the issue is, whenever I'm clicking the button, it is getting into an infinite loop of rendering and calls the API infinite times.
This is what the error shows:
Here is my MainComponent -
import React, { useEffect, useState } from "react";
import RefreshButton from "./RefreshButton";
import ShowData from "./ShowData";
const MainComponent = () => {
const [userData, setUserData] = useState();
useEffect(() => {
console.log(userData);
}, [userData]);
return (
<div>
<p style={{ textAlign: "center" }}>Main Component</p>
<RefreshButton setUserData={setUserData} />
{userData && <ShowData userData={userData} />}
</div>
);
};
export default MainComponent;
Here is my RefreshButton component -
import React from "react";
import axios from "axios";
const RefreshButton = ({ setUserData }) => {
const getData = () => {
axios
.get(`https://jsonplaceholder.typicode.com/todos`)
.then((response) => {
if (response.status === 200) setUserData(response.data);
})
.catch((err) => {
console.log(err);
});
};
return (
<div className="button-container">
<button className="fetch-data-button" onClick={() => getData()}>
Fetch new data
</button>
</div>
);
};
export default RefreshButton;
And here is my ShowData component -
import React from "react";
const ShowData = ({ userData }) => {
console.log("Here", userData);
return (
<>
{userData.map((info, idx) => (
<div className="user-data" key={idx}>
{info}
</div>
))}
</>
);
};
export default ShowData;
PS - I'm new to React and couldn't find a potential solution on this, there are several tutorials on how to fetch data from API calls and show it, but I wanted to know what I'm doing wrong here. Thanks in advance!
You might have misunderstood with the infinite loop error
It's actually a render error as being shown here:
To fix your render error, simply put an actual string variable in the {}
Because the response was an array of this object, so you can't simply render the whole object but need to pick an actual string variable inside:
[{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}],
Change to something like this:
const ShowData = ({ userData }) => {
console.log("Here", userData);
return (
<>
{userData.map((info, idx) => (
<div className="user-data" key={idx}>
{info.title} // <-- Put a title here.
</div>
))}
</>
);
};
Remove
useEffect(() => {
console.log(userData);
},[userData])
This will reevaluate component whenever user data changes, which Leeds to call showData infinitely
I have a parent component called App. I want to send the data that i took from the api(it includes random questions and answers) to child component.In child componenet(QuestionGrid), when i want to take the first question inside the array that come from api, I face the error. i want to use console.log(items[0].question) to see the first question but it fires error.But when I use console.log(items) it allow me to see them. I also aware of taking the data after they loaded.I used also useEffect. Here is my parent component
import './App.css';
import React, { useState,useEffect} from 'react';
import QuestionGrid from './components/QuestionGrid';
function App() {
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [items, setItems] = useState([]);
useEffect(() => {
fetch("https://opentdb.com/api.php?amount=40&category=9&difficulty=medium&type=multiple")
.then(res => res.json())
.then(
(result) => {
setIsLoaded(true);
setItems(result.results);
},
(error) => {
setIsLoaded(true);
setError(error);
}
)
}, [])
return (
<div className="App">
<QuestionGrid isLoaded={isLoaded} items={items}/>
</div>
);
}
export default App;
Here is my child component
import React, { useState, useEffect } from 'react';
export default function QuestionGrid({ isLoaded, items }) {
if(isLoaded){
console.log(items[0].question)
}
return isLoaded ?
<section className="cards">
</section> : <h1>Loading</h1>;
}
It will fire and error because the initial state of items is an empty array. And there is no indexes and object on the items state on the first render.
you can check if the the items is loaded by only checking its length.
return items.length > 0 ? <h1>your jsx component</h1> : <span>Loading...</span>
First thing, you should use the .catch() in fetch like:
fetch("https://opentdb.com/api.php?amount=40&category=9&difficulty=medium&type=multiple")
.then(res => res.json())
.then((result) => {
setIsLoaded(true);
setItems(result.results);
})
.catch(error => {
setIsLoaded(true);
setError(error);
)}
)
You are checking for isLoaded but not if there is any data. You are setting isLoaded(true) in both your result and also in error (which is not bad).
The error is caused because there is nothing in items[0]. To check for this you can call console.log(items?.[0].question) or you can make the check in your if-condition if(items.length > 0)
I have fetched some information an API and now I am trying to show the information fetched from it. The information which I have fetched includes books_authors , books_id's , price and the dataset is quite large and I am unable to display this information from my following approach...can someone help me with it... I am new to react
This is what I have tried so far:
import React from "react";
import Head from './head';
function App(){
let s;
const proxy = 'http://cors-anywhere.herokuapp.com/';
const api = `${proxy}http://starlord.hackerearth.com/books`;
fetch(api)
.then(response =>{
return response.json();
})
.then(data =>{
console.log(data);
data.forEach((index) => {
s=index;
<Head s/>
});
});
return(
<Head />
);
}
export default App;
//the head component
import React from "react";
function Head(props){
return(
<div className="app">
<div className="heading">
<h1>BOOK_CAVE</h1>
<div className="heading_description">So many books...so
little time...</div>
</div>
<div className="author">{props.authors}</div>
<div className="id">{props.bookID}</div>
<div className="price">{props.price}</div>
</div>
);
}
export default Head;
You can do this using Hooks, useState to store data and useEffect to call API,
import React, {useState,useEffect} from "react";
import Head from './head';
function App(){
const [data, setData] = useState([])
useEffect(() => {
const proxy = 'http://cors-anywhere.herokuapp.com/';
const api = `${proxy}http://starlord.hackerearth.com/books`;
fetch(api).then(response => {
setData(response.json())
})
},[])
return(
<div>
{data.length>0 && data.map(book => <Head book={book} />)
</div>
);
}
And you Head component should be,
function Head(props){
return(
<div className="app">
<div className="heading">
<h1>BOOK_CAVE</h1>
<div className="heading_description">So many books...so
little time...</div>
</div>
<div className="author">{props.book.authors}</div>
<div className="id">{props.book.bookID}</div>
<div className="price">{props.book.price}</div>
</div>
);
}
The books array you fetch from the API should be stored in a state and you should render the app according to that state. The data fetching should happen when the component mounted, so you make the call on componentDidMount lifecycle method, and update the state when the data finished fetching. Also, the Head component recieves three props, but you pass only one.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
books: [],
fetching: true,
}
componentDidMount() {
const proxy = 'http://cors-anywhere.herokuapp.com/';
const api = `${proxy}http://starlord.hackerearth.com/books`;
fetch(api)
.then(response => response.json() )
.then(data => this.setState({books: data, fetching: false,}) );
}
render() {
if (this.state.fetching) {
return <div>Loading...</div>
}
const headArray = this.state.books.map(book => (
<Head
authors={book.authors}
bookID={book.bookID}
price={book.price}
/>
));
return(
<div>
{headArray}
</div>
);
}
}
You need to:
Enclose the fetch n a lifecycle method or a useEffect hook
Put the API's response in a state (which will cause a re-render)
Iterate over the state in the return statement, using map, not forEach
Example using hooks:
function App(){
const [apiData, setApiData] = useState([])
const [isLoading, setIsLoading] = useState(true)
useEffect(
() => {
const proxy = 'http://cors-anywhere.herokuapp.com/';
const api = `${proxy}http://starlord.hackerearth.com/books`;
fetch(api).then(response => {
setApiData(response.json())
setIsLoading(false)
})
},
[]
)
const authors = data.map((index) => index.authors).flat()
return(
<div>
{authors.map((author) => <Head author{author} />)
</div>
);
}