React Native中无法访问API返回JSON值的技术求助

嗨，第一次接触React Native就尝试调用API展示数据，已经很棒啦～咱们一步步来解决你的问题：

首先，先理清API返回的数据结构：你调用的鸡尾酒API返回的是一个包含drinks数组的对象，所以你之前直接把整个responseJson存到data里，导致data其实是{ drinks: [...] }这样的结构，而不是直接的数组。这就是你没法直接访问data.idDrink的原因哦。

第一步：修正数据存储 #

先修改你的API请求函数，把responseJson.drinks存到state里，这样data就变成了饮品对象的数组：

const getApiInformations = async () => { 
  try {
    const response = await fetch('https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita'); 
    const responseJson = await response.json(); 
    setData(responseJson.drinks); // 这里只存drinks数组
  } catch (error) {
    console.error('请求出错啦:', error);
  }
} 

第二步：处理异步加载状态 #

因为API请求是异步的，页面初始渲染时data还是空数组，直接访问元素会报错。所以我们可以加个加载状态，或者用可选链来处理：

// 新增一个loading状态
const [loading, setLoading] = useState(true);

// 在请求完成后更新loading状态
const getApiInformations = async () => { 
  try {
    const response = await fetch('https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita'); 
    const responseJson = await response.json(); 
    setData(responseJson.drinks); 
    setLoading(false); // 请求完成，加载结束
  } catch (error) {
    console.error('请求出错啦:', error);
    setLoading(false);
  }
} 

第三步：展示数据 #

现在data是饮品数组了，你可以选择遍历所有饮品或者只展示单个饮品：

方式1：遍历所有饮品（推荐用map）

用数组的map方法遍历每个饮品对象，展示对应的属性：

return ( 
  <View style={{padding: 16}}> 
    {loading ? (
      <Text>加载中...</Text>
    ) : (
      data.map((drink) => (
        <View key={drink.idDrink} style={{marginBottom: 20}}>
          <Text style={{fontSize: 20, fontWeight: 'bold'}}>{drink.strDrink}</Text>
          <Text>饮品ID: {drink.idDrink}</Text>
          {/* 处理可能为null的属性，比如strTags */}
          {drink.strTags && <Text>标签: {drink.strTags}</Text>}
        </View>
      ))
    )}
  </View> 
);

这里用drink.idDrink作为key，比用index更稳定哦～

方式2：只展示第一个饮品

如果只想看第一个饮品的信息，可以这样写：

return ( 
  <View style={{padding: 16}}> 
    {loading ? (
      <Text>加载中...</Text>
    ) : data.length > 0 ? (
      <View>
        <Text>第一个饮品: {data[0].strDrink}</Text>
        <Text>ID: {data[0].idDrink}</Text>
      </View>
    ) : (
      <Text>没有找到饮品数据</Text>
    )}
  </View> 
);

小提示：可选链的使用 #

如果你不想加loading状态，也可以用可选链操作符?.来避免报错，比如：

<Text>{data?.[0]?.strDrink}</Text>

这样当data为空或者data[0]不存在时，不会抛出错误，只会显示空内容。

内容的提问来源于stack exchange，提问作者Ibrahim