Javascript 读取API请求时未定义常量

我是一个新的本地人，尝试从API上的请求中获取信息。我的问题是API不是很一致。。。我通过在我的应用程序中输入一个请求来获得啤酒的属性，然后我想获得我的啤酒的图像url。它应该位于property labels.icon下，但有时没有这样的属性

因此，当我试图渲染图像时，我得到了一个错误

组件/Search.js

import React from 'react';
import { StyleSheet, View, TextInput, Button, FlatList, Text } from 'react-native';
import AleItem from './AleItem';
import {getAleFromApiWIthSearchText} from '../API/BreweryDB' 


class Search extends React.Component {

  constructor(props) {
    super(props)
    this.searchedText= ""
    this.state = {
      ales: []
    }
  }

  _searchTextInputChanged(text) {
    this.searchedText = text
  }

  _loadAle() {
    if (this.searchedText.length > 0) { // Seulement si le texte recherché n'est pas vide
      getAleFromApiWIthSearchText(this.searchedText).then(data => {
          this.setState({ ales: data.data })
      })
    }
}

  render() {
    return (
      <View style={styles.main_container}>
        <TextInput 
          style={styles.textinput}
          placeholder='Titre du film'
          onChangeText={(text) => this._searchTextInputChanged(text)}
        />
        <Button title='Rechercher' onPress={() => this._loadAle()}/>
        <FlatList
            data={this.state.ales}
            keyExtractor={(item) => item.id.toString()}
            renderItem={({item}) => <AleItem ale={item}/>}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  main_container: {
    flex: 1,
    marginTop: 30
  },
  textinput: {
    marginBottom: 5,
    marginLeft: 5,
    marginRight: 5,
    height: 50,
    borderColor: '#000000',
    borderWidth: 1,
    paddingLeft: 5
  }
})

export default Search

组件/AleItem.js

import React from 'react'
import { StyleSheet, View, Text, Image } from 'react-native'

class AleItem extends React.Component {
  render() {
    const ale = this.props.ale
    const aleImage = ""

    try {
      this.props.ale.labels.icon;
      aleImage = this.props.ale.labels.icon;
    } catch(e) {
      aleImage = "";
    }

    return (
      <View style={styles.main_container}>
        <Image
          style={styles.image}
          source={{uri: aleImage}}
        />
        <View style={styles.content_container}>
          <View style={styles.header_container}>
            <Text style={styles.title_text}>{ale.name}</Text>
            <Text style={styles.vote_text}>{ale.ibu}</Text>
          </View>
          <View style={styles.description_container}>
            <Text style={styles.description_text} numberOfLines={6}>{ale.description}</Text>
            {/* La propriété numberOfLines permet de couper un texte si celui-ci est trop long, il suffit de définir un nombre maximum de ligne */}
          </View>
          <View style={styles.date_container}>
            <Text style={styles.date_text}>{ale.type}</Text>
          </View>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  main_container: {
    height: 190,
    flexDirection: 'row'
  },
  image: {
    width: 120,
    height: 180,
    margin: 5,
    backgroundColor: 'gray'
  },
  content_container: {
    flex: 1,
    margin: 5
  },
  header_container: {
    flex: 3,
    flexDirection: 'row'
  },
  title_text: {
    fontWeight: 'bold',
    fontSize: 20,
    flex: 1,
    flexWrap: 'wrap',
    paddingRight: 5
  },
  vote_text: {
    fontWeight: 'bold',
    fontSize: 26,
    color: '#666666'
  },
  description_container: {
    flex: 7
  },
  description_text: {
    fontStyle: 'italic',
    color: '#666666'
  },
  date_container: {
    flex: 1
  },
  date_text: {
    textAlign: 'right',
    fontSize: 14
  }
})

export default AleItem;

从“React”导入React
从“react native”导入{样式表、视图、文本、图像}
类AleItem扩展了React.Component{
render（）{
const ale=this.props.ale
const aleImage=“”
试一试{
this.props.ale.labels.icon；
aleImage=this.props.ale.labels.icon；
}捕获（e）{
aleImage=“”；
}
返回(
{ale.name}
{ale.ibu}
{ale.description}
{/*在一段很长的时间内，每一个文本的固有数量足以定义最大对齐度*/}
{ale.type}
)
}
}
const styles=StyleSheet.create({
主容器：{
身高：190，
flexDirection:“行”
},
图片：{
宽度：120，
身高：180，
差额：5，
背景颜色：“灰色”
},
内容容器：{
弹性：1，
保证金：5
},
标题(u)容器:{
弹性：3，
flexDirection:“行”
},
标题和正文：{
fontWeight:'粗体'，
尺寸：20，
弹性：1，
flexWrap:“wrap”，
填充右：5
},
表决案文：{
fontWeight:'粗体'，
尺寸：26，
颜色：“#666666”
},
容器说明：{
弹性：7
},
说明文字：{
fontStyle:'斜体'，
颜色：“#666666”
},
集装箱日期：{
弹性：1
},
日期和文本：{
textAlign:'右'，
尺寸：14
}
})
导出默认项目；

App.js

import React from 'react';
import Search from './Components/Search';

export default class App extends React.Component {
  render() {
    return (
      <Search/>
    );
  }; 
};

从“React”导入React；
从“./Components/Search”导入搜索；
导出默认类App扩展React.Component{
render（）{
返回(
);
}; 
};

---

我试图在我的图像下添加一个if条件，以便仅在定义了变量时使用aleImage，但似乎React原生图像对象无法与if一起使用。

您可以这样做

<Image source={(aleimg=== "") ? defaultImage : { uri: aleimg}} />

---

谢谢您的回答。那么我有两个问题要问你：1）我想了解你的代码：如果aleimg==”，那么默认url将是aleimg，但是如果aleimg！=="" ? 2） 我得到一个错误“找不到变量：aleImage”。我不明白这一点，因为我在上面使用了`render（）{const ale=this.props.ale if（this.props.ale.labels.icon）{const aleImage=this.props.ale.labels.icon；}else{const aleImage=“”；}`如果aleimg==”，则需要指定默认图像url，如果aleimg！=“”然后它将显示您从API获得的图像。

<Image source={(aleimg=== "") ? defaultImage : { uri: aleimg}} />