无法在本机反应中访问 json 值

Question

我最近一直在使用 React-native（老实说，这是我第一次）。

我正在从 api 中检索值，并尝试在 Text 标记中显示它们。但我不知道如何访问这些值。

所以，这是我的代码：

export const Home = () => {
  
  const [data, setData] = useState([]);

  const getApiInformations = async () => {

    const response = await fetch('https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita');
    const responseJson = await response.json();
    setData(responseJson);
  }
  
  useEffect(() => {
    getApiInformations();
  }, []);
  
  return (
    <View>
        <Text>
            {
              I want to put the values here like : data.idDrink, data.OtherValue,...
            }
        </Text>
    </View>
  );
}

在 {data.drinks} 我有：

0: {idDrink: '11007', strDrink: 'Margarita', strDrinkAlternate: null, strTags: 'IBA,ContemporaryClassic', strVideo: null, …}
1: {idDrink: '11118', strDrink: 'Blue Margarita', strDrinkAlternate: null, strTags: null, strVideo: null, …}
2: {idDrink: '17216', strDrink: "Tommy's Margarita", strDrinkAlternate: null, strTags: 'IBA,NewEra', strVideo: null, …}
3: {idDrink: '16158', strDrink: 'Whitecap Margarita', strDrinkAlternate: null, strTags: null, strVideo: null, …}
4: {idDrink: '12322', strDrink: 'Strawberry Margarita', strDrinkAlternate: null, strTags: null, strVideo: null, …}
5: {idDrink: '178332', strDrink: 'Smashed Watermelon Margarita'

感谢您的帮助:)。

Answer 1

您可以在 javascript 中使用.map() 功能。例如：

{data && data.map((element) => {
    return <Text key={element.idDrink}>ID: {element.idDrink} Name: {element.strDrink}</Text>
})}