我的程序正在“跳过”一个获取请求，React.js

Question

它真的很奇怪。

我做的第一次提取工作正常，但是在我的 handleSubmit() 方法中进行第二次提取时，它有点“跳过”它。 它继续，从不进入 .then 语句，不打印错误。 我已经尝试过其他 API，但老实说它应该可以正常工作，因为第一次几乎相同并且可以正常工作。 我也试过用 return 语句重写......

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>
  );
}

当然，我欢迎对我的代码提出任何建议，因为我在 React.js 和使用钩子方面是全新的。 提前致谢！

Answer 1

看起来成功了，但我刚刚意识到我的问题是什么。 当再次获取 api 时，我立即跳转到下一行代码，但获取并不像代码运行那样即时。 我在获取后发生了异常（因为我试图使用来自获取的信息），因此获取无法以足够快的速度完成以正确使用信息，然后异常运行，当然，控制台日志不起作用。 这基本上就是发生的事情，而且也很有趣。 但是感谢所有的帮助，它真的帮助我弄清楚发生了什么。