-
Notifications
You must be signed in to change notification settings - Fork 100
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
4. react-async 로 요청 상태 관리하기 · GitBook #94
Comments
react 18 upgrade 버전에서 해당 라이브러리가 제대로 동작하지 않는 것 같습니다. 해당 라이브러리의 github의 issue를 확인해본 결과 react 프로젝트에서<React.StrictMode /> 를 제거하면 동작하는 것 같습니다. |
저도 윗분이랑 같은 경우였네요. 참고로 증상은 에러는 안나고 로딩중만 계속 뜹니다. |
위에서 두 분 말씀하신 내용처럼 Users.js import axios from 'axios'
import User from './User'
import React, { useState } from 'react'
import { useAsyncRetry } from 'react-use'
async function getUsers() {
const url = 'https://jsonplaceholder.typicode.com/users'
const response = await axios.get(url)
return response.data
}
const Users = () => {
const [userId, setUserId] = useState(null)
const state = useAsyncRetry(getUsers)
const { loading, error, value: users, retry } = state
if (loading) return <div>로딩중..</div>
if (error) return <div>Error Occured: {error.message}</div>
if (!users) return <button onClick={retry}>불러오기</button>
return (
<>
<ul>
{users.map((user) => (
<li
key={user.id}
onClick={() => setUserId(user.id)}
style={{ cursor: 'pointer' }}
>
{user.username} ({user.name})
</li>
))}
</ul>
<button onClick={retry}>again</button>
{userId && <User id={userId} />}
</>
)
}
export default Users User.js import React from 'react'
import axios from 'axios'
import { useAsync } from 'react-use'
async function getUser(id) {
const url = `https://jsonplaceholder.typicode.com/users/${id}`
const response = await axios.get(url)
return response.data
}
function User({ id }) {
const state = useAsync(() => getUser(id), [id])
const { loading, error, value: user } = state
if (loading) return <div>로딩중..</div>
if (error) return <div>Error Occured: {error.message}</div>
if (!user) return null
return (
<div>
<h2>{user.username}</h2>
<p>
<b>Email:</b> {user.email}
</p>
</div>
)
}
export default User |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4. react-async 로 요청 상태 관리하기 · GitBook
https://react.vlpt.us/integrate-api/04-react-async.html
The text was updated successfully, but these errors were encountered: