My program is ‘skipping’ a fetch request, React.js

Its really weird.

The first fetch I do works appropriately, but when doing the second fetch in my handleSubmit() method it sort of ‘skips’ it. It goes on, never enters the .then statements, doesn’t print an error. Ive tried with other APIs, but honestly it should work fine since the first take is almost identical and it worked. Ive tried rewriting with a return statement as well…

export default function FormContainer() {
    const [api, setApi] = useState()
    const [showText, setShowText] = useState(false)
    const [apiUrl, setApiUrl] = useState('')
    const [text, setText] = useState('')
    const [display, setDisplay] = useState('')
    const [page, setPage] = useState('')

    useEffect(() => {
        fetch('https://swapi.co/api/') //FIRST TRY, works
        .then(response => response.json())
        .then(response => setApi(response))

    },[])

    function handleRadio(event){
        setShowText(true)
        setPage(event.target.id)
        setApiUrl(api[event.target.id])
    }

    function handleText(event){
        setText(event.target.value)
    }

    function handleSubmit(event){
        event.preventDefault();
        let list = {};
        let found = false;

        console.log(apiUrl); //Prints
        fetch(apiUrl) //SECOND TRY, fails
        .then(response =>{
            console.log(response); //Never prints
            return response.json();
        })
        .then(response => {
            console.log(response);
        })
        .catch(error => {
            console.error(error); //Doesnt run
        })


        while(!found){
            list.results.map(item => {
                if(item.name.toUpperCase() === text.toUpperCase()){
                    found = true
                    let toDisplay = ''
                    if(page === 'people'){
                        console.log(page)
                    }else if(page === 'planets'){
                        console.log(text)
                    }else if(page === 'films'){
                        console.log(page)
                    }else if(page === 'species'){
                        console.log(page)
                    }else if(page === 'vehicles'){
                        console.log(page)
                    }else{
                        console.log(page)
                        //Starships
                    }
                }
            })
            if(!found){
                if(list.next !== null){
                    fetch(list.next) //DIDNT GET TO TRY THIS
                    .then(response => response.json())
                    .then(response => {list = response})
                }else{
                    found = true
                    setDisplay('Object not found, are you sure you typed it in correctly?')
                }

            }
        }
    }

  return (
    <div >
      <FormRadios handleRadio={handleRadio}/>
      <br></br>
      {showText ? <FormComponent text={text} handleText={handleText} handleSubmit={handleSubmit}/> : null}
      <hr></hr>
      <FormOutput display={display}/>
    </div>
  );
}

Of course, I welcome any kind of advice on my code, since Im brand new on React.js and using hooks. Thanks in advance!

Answer

It appears successful, but just now I realized what my problem was. When fetching again for the api, i jump to the next line of code immediately, but the fetch isnt as instant as the code running. I had an exception going on after the fetch (because im trying to use info from the fetch), so the fetch couldnt finish fast enough to use the information correctly, then the exception runs and, of course, the console logs dont work. Thats basically what happened, and quite interesting as well. But thanks for all the help, it really helped me fin what was going on.

Advertisement

Answer