Это действительно странно.
Первая выборка, которую я делаю, работает надлежащим образом, но при выполнении второй выборки в моем методе 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 и использую хуки. Заранее спасибо!