javascript - 读取 API 请求时未定义常量

Question

我是react-native新手，正在尝试从API请求中获取信息。我的问题是 API 不太一致...我通过在应用程序上输入请求来获取啤酒的属性，然后我想获取啤酒的图像 url。它应该位于属性 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

API/breweryDB.js

const API_TOKEN = "MY API TOKEN"

export function getAleFromApiWIthSearchText(text) {
    const url = 'https://sandbox-api.brewerydb.com/v2/search?q='+text+'&type=beer&key='+API_TOKEN+'&format=json'
    return fetch(url)
        .then((response) => response.json())
        .catch((erro) => console.log(error))
}

组件/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;

App.js

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

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

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

Answer 1

你可以做这样的事情

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