我的程序'skipping'获取请求，反应.js

Question

这真的很奇怪。

我所做的第一次提取工作正常，但是当我在handleSubmit((方法中进行第二次提取时，它会"跳过"它。它继续，从不输入 .then 语句，不打印错误。我尝试使用其他 API，但老实说它应该可以正常工作，因为第一次拍摄几乎相同并且它有效。我也尝试用返回语句重写...

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 时，我会立即跳转到下一行代码，但获取并不像代码运行那样即时。我在获取后发生了异常(因为我尝试使用提取中的信息(，因此提取无法足够快地完成以正确使用信息，然后异常运行，当然，控制台日志不起作用。这基本上就是发生的事情，而且也很有趣。但是感谢所有的帮助，它真的帮助我了解了正在发生的事情。