如何將 API 調用響應存儲為 object 或將數組解析為 JSON？

Question

我的應用程序正在嘗試進行 API 調用並以模式顯示來自它的數據。 它不起作用，因為我目前將 API 調用的響應存儲為一個數組，這意味着我無法訪問響應的子元素。

那么我的問題是：有沒有辦法：

• 使用 State 存儲 object，以便我可以方便地引用該 object 的部分內容？

要么

• 將數組解析為 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 的一種非常簡單的方法是像這樣使用 Object.assign ：

Object.assign({}, data.drinks)

它會返回帶有編號鍵的 object，您可以將其存儲到 state。