I'm using react-router-dom v5, and react 16
Whenever I navigate like this:
from "/products/:someId" to "/products/:someOtherId"
the url changes but the components do not update accordingly
it's the same with queries.
"/products?search=something" or "/products?search=someOtherThing"
it does work when I'm in a different url, like "/" or "/users",
I'm using Link for navigation, I also tried the useHistory hook: history.push, history.replace and withRouter(myComponent);
This is how I'm getting data from queries/params
async function searchProducts(searchValue) {
const response = await axios.post(
"http://localhost:8000/api/products/search",
{ search: searchValue });
return response.data.body;
}
const useFetchData = (query) => {
const [products, setProducts] = useState([]);
useEffect(() => {
if (products.length === 0) {
// Use searchProducts for the request
searchProducts(query).then((foundProducts) => {
setProducts(foundProducts);
});
}
}, [products, query]);
return products;
};
then I useFetchData in my component which goes:
const ProductList = () => {
const history = useHistory();
// parsing query to be -> { search: "value" }
const urlQuery = queryString.parse(history.location.search);
const products = useFetchData(urlQuery.search);
const getList = () => {
return products.map((product) => {
return (
<li key={product._id}>
<ProductItem product={product} />
</li>
);
});
};
return <div className="container">{getList()}</div>;
};
The search button is in a different component for the header, it's always there since it's in the layout
<button className="header-search-button" onClick={handleClick}>
Search
</button>
and the handleClick:
// searchvalue has it's own onChange handler
const [searchValue, setSearchValue] = useState("");
// code...
const handleClick = () => {
// .... some code
// I also tried with push and Link
history.replace(`/products?search=${searchValue}`);
};
It's really difficult to tell without the code.
But my guess is you are able to change the /products?search=bag to /products?search=watch.
But after that it's not able to update the state and hence no re render.When you reload then the render happens.
It would be easier if we could see the code.
Related
I am trying to set a React state to an array of objects via an Axios get request. However, when I try to update the state, it shows up as an empty array.
I know for a fact that I am receiving the correct response from the API, so I think I am missing somethig when it comes to updating the state.
Here's my code:
const Home = () => {
const [movieTitle, setMovieTitle] = useState('');
const [searchResults, setSearchResults] = useState([]);
const handleChange = (e) => {
setMovieTitle(e.target.value);
};
const getMovieData = () => {
const apiKey = 'didntleakit';
const apiUrl = 'http://www.omdbapi.com/?apikey=' + apiKey + '&s=' + movieTitle;
Axios.get(apiUrl)
.then((res) => {
setSearchResults(res.data.Search);
});
console.log(searchResults);
};
return(
<div>
<p>Home page</p>
<TextField defaultValue="Movie" onChange={(e) => handleChange(e)}/>
<button onClick={getMovieData}/>
</div>
);
};
You cannot log the state variable right after setting it as setState is async. You can log the updated state inside a useEffect:
import {useEffect} from 'react'
useEffect(() => {
console.log(searchResults);
}, [searchResults])
That's because you are logging searchResults BEFORE data was retrieved. Axios.get() is an async function, to fix it, just put console.log right before returning JSX code:
console.log(searchResults);
return (<div>....</div>);
So when the data is retrieved from the endpoint, you will update searchResults which will re-render the component with updated state and log correct searchResults to the console.
You can not log state just after setting it as it is async so log it in useEffect and pass state as dependency array.
Always try to use spread operator while setting state if it is object or array.
const Home = () => {
const [movieTitle, setMovieTitle] = useState('');
const [searchResults, setSearchResults] = useState([]);
const handleChange = (e) => {
setMovieTitle(e.target.value);
};
const getMovieData = () => {
const apiKey = 'didntleakit';
const apiUrl = 'http://www.omdbapi.com/?apikey=' + apiKey + '&s=' +
movieTitle;
Axios.get(apiUrl)
.then((res) => {
setSearchResults([...res.data.Search]);//use spread operator for optimised code
});
};
useEffect(()=>{
console.log(searchResults);
},[searchResults])
return(
<div>
<p>Home page</p>
<TextField defaultValue="Movie" onChange={(e) => handleChange(e)}/>
<button onClick={getMovieData}/>
</div>
);
};
How do we detect a change in the URL hash of a Next.js project?
I don't want to reload my page every time the slug changes.
I cannot use <Link> since all of my data comes from DB
Example:
When clicking on an tag from
http://example/test#url1
to
http://example.com/test#url2
Tried the below, but this seems to work for path change only.
import React, { useEffect,useState } from 'react';
import { useRouter } from 'next/router'
const test = () => {
const router = useRouter();
useEffect(() => {
console.log(router.asPath);
}, [router.asPath]);
return (<></>);
};
export default test;
You can listen to hash changes using hashChangeStart event from router.events.
const Test = () => {
const router = useRouter();
useEffect(() => {
const onHashChangeStart = (url) => {
console.log(`Path changing to ${url}`);
};
router.events.on("hashChangeStart", onHashChangeStart);
return () => {
router.events.off("hashChangeStart", onHashChangeStart);
};
}, [router.events]);
return (
<>
<Link href="/#some-hash">
<a>Link to #some-hash</a>
</Link>
<Link href="/#some-other-hash">
<a>Link to #some-other-hash</a>
</Link>
</>
);
};
If you're not using next/link or next/router for client-side navigation (not recommended in Next.js apps), then you'll need to listen to the window's hashchange event.
Your useEffect would look like the following.
useEffect(() => {
const onHashChanged = () => {
console.log('Hash changed');
};
window.addEventListener("hashchange", onHashChanged);
return () => {
window.removeEventListener("hashchange", onHashChanged);
};
}, []);
If you're relying on URL hash for multiple re-renders or state changes, note that NextJS hashChangeStart event does not account for browser refresh or direct browser URL address navigation
A complete solution might need a combination of event listeners to cover all edge cases.
const useUrlHash = (initialValue) => {
const router = useRouter()
const [hash, setHash] = useState(initialValue)
const updateHash = (str) => {
if (!str) return
setHash(str.split('#')[1])
}
useEffect(() => {
const onWindowHashChange = () => updateHash(window.location.hash)
const onNextJSHashChange = (url) => updateHash(url)
router.events.on('hashChangeStart', onNextJSHashChange)
window.addEventListener('hashchange', onWindowHashChange)
window.addEventListener('load', onWindowHashChange)
return () => {
router.events.off('hashChangeStart', onNextJSHashChange)
window.removeEventListener('load', onWindowHashChange)
window.removeEventListener('hashchange', onWindowHashChange)
}
}, [router.asPath, router.events])
return hash
}
Hey guys I've been learning react for a few weeks now so please be easy on me =). When I was using dummy data, the filter function worked and showed the correct products in the category. I built the back end api using django and now my filter function doesn't work anymore. It does filter but the data totally disappears after pressing the different filter buttons. Can anyone help?
import React, { useState, useEffect } from "react";
import axios from "axios";
import ButtonList from "../components/ButtonList";
import ProductList from "../components/ProductList";
const ProductPage = () => {
const [products, setProducts] = useState([]);
useEffect(() => {
const fetchProduct = async () => {
const { data } = await axios.get("/api/products/");
setProducts(data);
};
fetchProduct();
}, []);
const filter = (button) => {
if (button === "All") {
setProducts(products);
return;
}
const filteredData = products.filter(
(products) => products.category === button
);
setProducts(filteredData);
};
return (
<div>
<ButtonList onClickFilter={filter} />
<ProductList product={products} />
</div>
);
};
export default ProductPage;
You are losing the original list of products as your setting filtered data in it. So, currently there is no way to get the original products list back.
To fix it, you can set search in a state and use that to filter the products. This way original data is always present in products but filtered data is used for rendering the list:
const ProductPage = () => {
const [products, setProducts] = useState([])
const [search, setSearch] = useState('ALL') // New State for search
// ...
const filter = (button) => {
setSearch(button)
}
return (
<div>
<ButtonList onClickFilter={filter} />
<ProductList
product={products.filter((p) => search === 'ALL' || p.category === search)}
/>
</div>
)
}
Right now, after filtering, you're losing the full products array information permanently, since it only exists in the stateful products variable that setProducts will essentially overwrite. Add another state, one which contains the full products, and filter off of it instead.
const ProductPage = () => {
const [fullProducts, setFullProducts] = useState([]);
const [products, setProducts] = useState([]);
useEffect(() => {
const fetchProduct = async () => {
const { data } = await axios.get("/api/products/");
setFullProducts(data);
};
fetchProduct();
}, []);
const filter = (button) => {
if (button === "All") {
setProducts(fullProducts);
return;
}
const filteredData = fullProducts.filter(
(product) => product.category === button
);
setProducts(filteredData);
};
return (
<div>
<ButtonList onClickFilter={filter} />
<ProductList product={products} />
</div>
);
};
I would like to ask you how to reload a component after modifying the data of a form, then I have my component:
export default function MyComponent() {
const url = "/api/1";
const [resData, setResData] = useState(null);
useEffect(() => {
const jwt = getJwt();
const fetchData = async () => {
const resP = await axios(url);
setResData(resP.data);
};
fetchData();
}, []);
return <EditComponent={resData} />
}
This component passes my data to the "EditCompoent" child component in which there is a form that is filled with data from the parent component that I can modify in which there is a save button that when I click allows me to send the modified data to my beckend:
const handleConfirm = () => {
axios.put(url, data).then((res) => {
//Reload Component
})
}
I would like to be able to reload the parent component as soon as this works is successful what could I do? I don't want to reload the whole page I just want to reload the parent component that is "MyComponent", I hope I have well posed the problem.
I'd pass the whole useEffect callback down so that handleConfirm can call it again after the axios.put, after which the resData state in the parent will be updated:
export default function MyComponent() {
const url = "/api/1";
const [resData, setResData] = useState(null);
const tryLoginJWT = () => {
const jwt = getJwt();
const resP = await axios(url);
setResData(resP.data);
};
useEffect(tryLoginJWT, []);
return <EditComponent {...{ resData, tryLoginJWT }} />
}
const handleConfirm = () => {
axios.put(url, data)
.then(tryLoginJWT)
.catch(handleErrors); // don't forget to catch here in case there's a problem
}
How to send http request on button click with react hooks? Or, for that matter, how to do any side effect on button click?
What i see so far is to have something "indirect" like:
export default = () => {
const [sendRequest, setSendRequest] = useState(false);
useEffect(() => {
if(sendRequest){
//send the request
setSendRequest(false);
}
},
[sendRequest]);
return (
<input type="button" disabled={sendRequest} onClick={() => setSendRequest(true)}
);
}
Is that the proper way or is there some other pattern?
export default () => {
const [isSending, setIsSending] = useState(false)
const sendRequest = useCallback(async () => {
// don't send again while we are sending
if (isSending) return
// update state
setIsSending(true)
// send the actual request
await API.sendRequest()
// once the request is sent, update state again
setIsSending(false)
}, [isSending]) // update the callback if the state changes
return (
<input type="button" disabled={isSending} onClick={sendRequest} />
)
}
this is what it would boil down to when you want to send a request on click and disabling the button while it is sending
update:
#tkd_aj pointed out that this might give a 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."
Effectively, what happens is that the request is still processing, while in the meantime your component unmounts. It then tries to setIsSending (a setState) on an unmounted component.
export default () => {
const [isSending, setIsSending] = useState(false)
const isMounted = useRef(true)
// set isMounted to false when we unmount the component
useEffect(() => {
return () => {
isMounted.current = false
}
}, [])
const sendRequest = useCallback(async () => {
// don't send again while we are sending
if (isSending) return
// update state
setIsSending(true)
// send the actual request
await API.sendRequest()
// once the request is sent, update state again
if (isMounted.current) // only update if we are still mounted
setIsSending(false)
}, [isSending]) // update the callback if the state changes
return (
<input type="button" disabled={isSending} onClick={sendRequest} />
)
}
You don't need an effect to send a request on button click, instead what you need is just a handler method which you can optimise using useCallback method
const App = (props) => {
//define you app state here
const fetchRequest = useCallback(() => {
// Api request here
}, [add dependent variables here]);
return (
<input type="button" disabled={sendRequest} onClick={fetchRequest}
);
}
Tracking request using variable with useEffect is not a correct pattern because you may set state to call api using useEffect, but an additional render due to some other change will cause the request to go in a loop
In functional programming, any async function should be considered as a side effect.
When dealing with side effects you need to separate the logic of starting the side effect and the logic of the result of that side effect (similar to redux saga).
Basically, the button responsibility is only triggering the side effect, and the side effect responsibility is to update the dom.
Also since react is dealing with components you need to make sure your component still mounted before any setState or after every await this depends on your own preferences.
to solve this issue we can create a custom hook useIsMounted this hook will make it easy for us to check if the component is still mounted
/**
* check if the component still mounted
*/
export const useIsMounted = () => {
const mountedRef = useRef(false);
const isMounted = useCallback(() => mountedRef.current, []);
useEffect(() => {
mountedRef.current = true;
return () => {
mountedRef.current = false;
};
});
return isMounted;
};
Then your code should look like this
export const MyComponent = ()=> {
const isMounted = useIsMounted();
const [isDoMyAsyncThing, setIsDoMyAsyncThing] = useState(false);
// do my async thing
const doMyAsyncThing = useCallback(async () => {
// do my stuff
},[])
/**
* do my async thing effect
*/
useEffect(() => {
if (isDoMyAsyncThing) {
const effect = async () => {
await doMyAsyncThing();
if (!isMounted()) return;
setIsDoMyAsyncThing(false);
};
effect();
}
}, [isDoMyAsyncThing, isMounted, doMyAsyncThing]);
return (
<div>
<button disabled={isDoMyAsyncThing} onClick={()=> setIsDoMyAsyncThing(true)}>
Do My Thing {isDoMyAsyncThing && "Loading..."}
</button>;
</div>
)
}
Note: It's always better to separate the logic of your side effect from the logic that triggers the effect (the useEffect)
UPDATE:
Instead of all the above complexity just use useAsync and useAsyncFn from the react-use library, It's much cleaner and straightforward.
Example:
import {useAsyncFn} from 'react-use';
const Demo = ({url}) => {
const [state, doFetch] = useAsyncFn(async () => {
const response = await fetch(url);
const result = await response.text();
return result
}, [url]);
return (
<div>
{state.loading
? <div>Loading...</div>
: state.error
? <div>Error: {state.error.message}</div>
: <div>Value: {state.value}</div>
}
<button onClick={() => doFetch()}>Start loading</button>
</div>
);
};
You can fetch data as an effect of some state changing like you have done in your question, but you can also get the data directly in the click handler like you are used to in a class component.
Example
const { useState } = React;
function getData() {
return new Promise(resolve => setTimeout(() => resolve(Math.random()), 1000))
}
function App() {
const [data, setData] = useState(0)
function onClick() {
getData().then(setData)
}
return (
<div>
<button onClick={onClick}>Get data</button>
<div>{data}</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<div id="root"></div>
You can define the boolean in the state as you did and once you trigger the request set it to true and when you receive the response set it back to false:
const [requestSent, setRequestSent] = useState(false);
const sendRequest = () => {
setRequestSent(true);
fetch().then(() => setRequestSent(false));
};
Working example
You can create a custom hook useApi and return a function execute which when called will invoke the api (typically through some onClick).
useApi hook:
export type ApiMethod = "GET" | "POST";
export type ApiState = "idle" | "loading" | "done";
const fetcher = async (
url: string,
method: ApiMethod,
payload?: string
): Promise<any> => {
const requestHeaders = new Headers();
requestHeaders.set("Content-Type", "application/json");
console.log("fetching data...");
const res = await fetch(url, {
body: payload ? JSON.stringify(payload) : undefined,
headers: requestHeaders,
method,
});
const resobj = await res.json();
return resobj;
};
export function useApi(
url: string,
method: ApiMethod,
payload?: any
): {
apiState: ApiState;
data: unknown;
execute: () => void;
} {
const [apiState, setApiState] = useState<ApiState>("idle");
const [data, setData] = useState<unknown>(null);
const [toCallApi, setApiExecution] = useState(false);
const execute = () => {
console.log("executing now");
setApiExecution(true);
};
const fetchApi = useCallback(() => {
console.log("fetchApi called");
fetcher(url, method, payload)
.then((res) => {
const data = res.data;
setData({ ...data });
return;
})
.catch((e: Error) => {
setData(null);
console.log(e.message);
})
.finally(() => {
setApiState("done");
});
}, [method, payload, url]);
// call api
useEffect(() => {
if (toCallApi && apiState === "idle") {
console.log("calling api");
setApiState("loading");
fetchApi();
}
}, [apiState, fetchApi, toCallApi]);
return {
apiState,
data,
execute,
};
}
using useApi in some component:
const SomeComponent = () =>{
const { apiState, data, execute } = useApi(
"api/url",
"POST",
{
foo: "bar",
}
);
}
if (apiState == "done") {
console.log("execution complete",data);
}
return (
<button
onClick={() => {
execute();
}}>
Click me
</button>
);
For this you can use callback hook in ReactJS and it is the best option for this purpose as useEffect is not a correct pattern because may be you set state to make an api call using useEffect, but an additional render due to some other change will cause the request to go in a loop.
<const Component= (props) => {
//define you app state here
const getRequest = useCallback(() => {
// Api request here
}, [dependency]);
return (
<input type="button" disabled={sendRequest} onClick={getRequest}
);
}
My answer is simple, while using the useState hook the javascript doesn't enable you to pass the value if you set the state as false. It accepts the value when it is set to true. So you have to define a function with if condition if you use false in the usestate