如何将 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)

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