是什么导致此JSON出现意外的EOF

Question

我正在尝试从API获取JSON。我知道API是有效的，因为我可以通过Postman进行调用来获取数据，但当我试图在我的应用程序中获取数据时；JSON分析错误：意外的EOF；。

所使用的API调用与应用程序中其他地方对不同端点的调用基本相同，因此我不知道是什么原因导致了问题。

代码：

const DrinkPopup = (props) => {
const [drinkDetails,setDrinkDetails] = useState([])
fetch('https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=' + props.drink)
.then((response) => response.json())
.then((json) => setDrinkDetails(json.drinks))
.catch((error) => console.error(error))

return(
<Modal isVisible={props.modalVisible}
onBackdropPress={()=>{props.setModalVisible(false)}} //allows closing modal by tapping outside it or back button
onBackButtonPress={()=>{props.setModalVisible(false)}} 
animationIn={"slideInUp"}>  
<View style={styles.infocard}>
<View style={styles.titleBox}>
<Text style={styles.header}>{drinkDetails.idDrink}</Text>
</View>
</View>
</Modal>

)

Answer 1

试试这种方法，比如

<Text style={styles.header}>
{drinkDetails && drinkDetails.idDrink
? JSON.stringify(drinkDetails.idDrink)
: "No record"}
</Text>

Answer 2

尝试将fetch放入async函数中，并可能在useEffect钩子中调用它。