Const loadCommit = () => fetch("http://localhost:8080/api")

Question

Const loadCommit = () => fetch("http://localhost:8080/api")

.then(res => {
if (res.ok) return res;
else throw new Error("Yikes");
})
.then(res => res.json())
.catch(err => {
throw new Error(err.message)
});

function App() {
return (
<Async promiseFn={loadCommit}>
{({data, err, loading}) => {
if (loading) return "Loading..."
if (err) return (
<div>
<p>{err.message}</p>
</div>
)
if (data)
return (
<div>
<p>{data.message}</p>
<p>{data.id}</p>
</div>
)
}}
</Async>
);
}

How do I make it return actual html on error?

I'm changing port in the URL and it just prints GET http://localhost:8081/api net::ERR_CONNECTION_REFUSED in console 😐

0

22.03.2021

15 ответов

13 просмотров

Darvesh 🍀

Is this ReactJS?

0

22.03.2021

Пользователь 61024 Автор вопроса

Darvesh 🍀
Is this ReactJS?

Yes

0

22.03.2021

Darvesh 🍀

Пользователь 61024
Yes

Why don't you use state?

0

22.03.2021

Пользователь 61024 Автор вопроса

Darvesh 🍀
Why don't you use state?

I use it in our work projects, but I'm using them by looking at already written code by someone else So I'm kinda familiar with how stuff in react works, but I'm not sure what to use and when

0

22.03.2021

Darvesh 🍀

Пользователь 61024
I use it in our work projects, but I'm using them ...

I'm not a frontend dev but check this kek https://codesandbox.io/s/hardcore-wood-45pry

0

22.03.2021

Пользователь 61024 Автор вопроса

Darvesh 🍀
I'm not a frontend dev but check this kek https://...

oh wow

0

22.03.2021

Пользователь 61024 Автор вопроса

Darvesh 🍀
I'm not a frontend dev but check this kek https://...

Argument type function(): Promise<void> is not assignable to parameter type EffectCallback ... Type function(): Promise<void> is not assignable to type () => (void | (() => (void | undefined))) Type Promise<void> is not assignable to type void | (() => (void | undefined)) 😐😐😐

0

22.03.2021

POORYAJ

shouldn't you return the promise in your loadCommit function? otherwise how the Async component your passing the function to should know about the response

0

22.03.2021

Пользователь 61024 Автор вопроса

POORYAJ
shouldn't you return the promise in your loadCommi...

yeah, this is what I'm reading about now

0

22.03.2021

Darvesh 🍀

Пользователь 61024
Argument type function(): Promise<void> is not ass...

lel

0

22.03.2021

POORYAJ

Пользователь 61024
yeah, this is what I'm reading about now

If your looking for how to make it better, always abstract your data fetching logic into a custom hook with a proper name. Also look into libraries like 'react-query' that help you with this

0

22.03.2021

Darvesh 🍀

Пользователь 61024
Argument type function(): Promise<void> is not ass...

I updated, check this now https://codesandbox.io/s/hardcore-wood-45pry?file=/src/App.js

0

22.03.2021

Darvesh 🍀

Darvesh 🍀
I updated, check this now https://codesandbox.io/s...

@yedexyz

0

22.03.2021