React useSWR çoklu request sorunu

gamerboytr 924 gün önce

392 defa görüntülendi ve 1 kişi tarafından değerlendirildi

Merhabalar React Route ile 2 tane sayfam var ana sayfada apiye request atıyorum ancak b sayfasına gidip tekrar a sayfasına geldiğimde request tekrarlanıyor bunun önüne nasıl geçebilirim ?

// App.jsx
return (
    <Routes>
    	<Route path='/' element={<Home />} />
    	<Route path='/users' element={<Home path='users' />} />
    </Routes>
)

// Home.jsx
export default function Home({ path = null }) {
	const [content, setContent] = useState(null);

	useEffect(() => {
		switch (path) {
			case 'changelog':
				setContent(<ChangelogPage />);
				break;
			default:
				setContent(<HomeIndexPage />);
		}
	}, [path]);
	
	return (
		<>
		    <Content content={content} />
		</>
	);
}

// HomeIndexPage.jsx
export default function HomeIndexPage() {
	const [users, setUsers] = useState([]);
	const [error, setError] = useState(null);

	const request = useSWR('<API>');

	useEffect(() => {
	 	if (request.error) setError(request.error.message);
	 	if (request.data) setUsers(request.data.data);
	}, [request.error, request.data]);

	return (
		<>
			{error ? (
				<span>Bir hata oluştu</span>
			) : users.length ? (
				{lastUsers.map(user => (
					<>
					    <span>{user}</span>
					</>
				))}
			) : (
				<span>Yükleniyor...</span>
			)}
		</>
	);
};

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (1)

canpacis

919 gün önce

HomeIndexPage fonksiyonu içinde yazdıkların, bu bileşen mount olduğunda çalışacak. Her bu sayfaya gidişinde yine useSWR() hook'unu kullanıyorsun, değişmeyen bir bileşene kadar çıkarman lazım bu isteği sonra da gelen datayı alt bileşene ulaştırman gerek. Örneğin;

// Home.jsx
export default function Home({ path = null, request }) {
	const [content, setContent] = useState(null);
	const request = useSWR('<API>');

	useEffect(() => {
		switch (path) {
			case 'changelog':
				setContent(<ChangelogPage />);
				break;
			default:
				setContent(<HomeIndexPage request={request} />);
		}
	}, [path]);
	
	return (
		<>
		    <Content content={content} />
		</>
	);
}

// HomeIndexPage.jsx
export default function HomeIndexPage({ request }) {
	const [users, setUsers] = useState([]);
	const [error, setError] = useState(null);

	useEffect(() => {
	 	if (request.error) setError(request.error.message);
	 	if (request.data) setUsers(request.data.data);
	}, [request.error, request.data]);

	return (
		<>
			{error ? (
				<span>Bir hata oluştu</span>
			) : users.length ? (
				{lastUsers.map(user => (
					<>
					    <span>{user}</span>
					</>
				))}
			) : (
				<span>Yükleniyor...</span>
			)}
		</>
	);
};

#010382