如何将API调用响应存储为对象或将数组解析为JSON

Question

我的应用程序正在尝试进行API调用，并以模态显示其中的数据。它不起作用，因为我现在将API调用的响应存储为数组，这意味着我无法访问响应的子元素。

那么，我的问题是：有没有办法：

• 使用State存储对象，以便我可以方便地引用该对象的部分

或

• 将数组解析为JSON，这样我就可以从响应中获取数据，并在需要时将其处理为JSON

我意识到这是一个有点奇怪的问题，所以任何能达到同样结果的答案都会很棒。

这是我的代码：

const DrinkPopup = (props) => {
let [drinkDetails,setDrinkDetails] = useState([])
let selectedDrinkId = props.drink
const getDrinkAsync = async (selectedDrinkId) => {
try {
let response = await fetch('https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i='+selectedDrinkId);
let data = await response.json();
setDrinkDetails(data.drinks)
return true;
} catch (error) {
console.error(error);
}
}
useEffect (() =>  { 
getDrinkAsync(selectedDrinkId)
console.log(selectedDrinkId) 
console.log(drinkDetails) 
},[]);


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

将数组转换为对象的一种非常简单的方法是使用object.assign，如下所示：

Object.assign({}, data.drinks)

它将返回一个带有编号键的对象，您可以将其存储到状态。