0

DETAIL*

const Detail = (props) {

    const { getLatest, getAll } = useRoom();
    const [ rowData, setRowData ] = useState([]);
    const [ state, setState ] = useState([]);
    
    useEffect(() => {
        const fetchData = async () => {
            getLatest(PARAMS).then((res) => setState(res['data'].data));
            getAll({length: 9999}).then((res) => setRowData(res['data'].data));
        }
        fetchData();
    }, []);

     return (
{state &&
                state.map((res, i) => (
                    <div key={i} className="w-full px-2 flex rounded justify-center items-center p-2 m-1 bg-white">
                        <Room item={res}  />
                    </div>
                ))}
    )
    }
    
export default Detail;

What I'm trying to do here is to add a loader also my problem is when I didn't use the setTimeout I'm getting error which is Request failed with status code 500. but when I added the setTimeout there's no error.

setTimeout(() => {...fetchData }

API CALLING

getLatest: (params?: object) => Axios.get(`${API_URL}/latest` + (params ? getQueryParams(params) : ''))

HERE's the error when reload the page. enter image description here

  • 2
    Because you are aborting the HTTP requests before they complete and your server doesn't know how to deal with an abort signal. So the `setTimeout()` is allowing the HTTP request to complete and prevents the abort. **Answer**: Don't abort the HTTP request. – Randy Casburn Jan 26 '21 at 01:27
  • @RandyCasburn So the solution, is to add the ```setTimeout()```? is there other way fetch a data without using the setTimeout? I remove the ```abortController```. –  Jan 26 '21 at 01:32
  • 1
    Does this **accepted answer** answer your question? [How to call an async function inside a UseEffect() in React?](https://stackoverflow.com/questions/56838392/how-to-call-an-async-function-inside-a-useeffect-in-react) – Randy Casburn Jan 26 '21 at 01:42
  • @RandyCasburn same error –  Jan 26 '21 at 01:52
  • 1
    Then the request to being malformed elsewhere. that code has not been provided in your question. – Randy Casburn Jan 26 '21 at 02:03

1 Answers1

1

You're not really doing anything with the async function. The point of using an async function is that you use await inside to wait for the server's response. Try using await instead of using then with the requests that you're making to the server. I believe something like this will work:

useEffect(() => {
    const fetchData = async () => {
        let res = await getLatest(PARAMS);
        setState(res['data'].data)
        let resAll = await getAll({length: 9999});
        setRowData(resAll['data'].data)
    }
    fetchData();
}, []);
Ziku
  • 431
  • 6
  • 9
  • the error still exist when reload the page –  Jan 26 '21 at 01:58
  • 1
    Maybe it might be best to get some info about your backend. The request might not be related to the async function. The set timeout delays the HTTP request so there is something that might need to happen before you send the HTTP request. If there is a way you can get an error log of the backend (since it's a status code 500), it will help you resolve the issue. – Ziku Jan 26 '21 at 06:56
  • 1
    I tried to see if it can be a frontend issue. Take a look at this, it's something similar to your problem. I hope it helps! https://github.com/axios/axios/issues/1143#issuecomment-340331822 – Ziku Jan 26 '21 at 11:02