异步/等待调用react-native-component中的api的搜索函数

Question

我是新手React Native，需要你的帮助。

我的搜索函数有一个api调用，它根据用户的输入调用不同的食谱。我在另一个文件中创建了async/await api调用。我在控制台上记录了它，一切都很好。它会在控制台中输出json。然而，我想在我的SearchScreen中实现这个调用，它是下面附加的文件。

在handleSearch函数中，我调用的api是getRecipesFromApiByRecipeName(text);方法。text是用户输入。

我知道我需要以某种方式创建一个异步函数，这样我就可以接收api调用，而不是接收

Promise {
  "_40": 0,
  "_55": null,
  "_65": 0,
  "_72": null,
}

一直以来。但是如何..。

我听说可以在ComponentDidMount()函数中进行api调用，因为这可以是异步的，但是Api只会而且必须在用户输入他的查询之后调用，而不是在组件挂载之后。

我也尝试过使用.then函数，它应该以某种方式“取消对Json的承诺”，但没有成功。

因此，我希望发生的是，一旦用户输入，api就会被调用，并且可以将json添加到屏幕中。如果你能建议我应该做什么，或者甚至给我看一些代码片段。也许我攻击这些东西的整个方式都是错误的，我想要的是在设备上显示食谱。因此，即使你对如何实现api调用有一个全新的想法，请让我知道，我真的很感激。

也让我知道，如果有什么我应该在这个屏幕上修复。

我也很难理解整个“状态”是如何工作的，所以如果可以解释的话，我会非常感激的。

提前谢谢。

import React from 'react';
import {
  FlatList,
  Text,
  View,
  Image,
  TouchableHighlight
} from 'react-native';
import styles from './styles';
import { ListItem, SearchBar } from 'react-native-elements';
import MenuImage from '../../components/MenuImage/MenuImage';
import { getRecipesFromApiByRecipeName } from '../../data/Data';

export default class SearchScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    return {
      headerRight: () =>
        <MenuImage
          onPress={() => {
            navigation.openDrawer();
          }}
        />
      ,
      headerTitle: () =>
        <SearchBar
          containerStyle={{
            backgroundColor: 'transparent',
            borderBottomColor: 'transparent',
            borderTopColor: 'transparent',
            width: 300

          }}
          inputContainerStyle={{
            backgroundColor: '#EDEDED',
            borderRadius: 25
          }}
          inputStyle={{
            backgroundColor: '#EDEDED',
            borderRadius: 5,
            color: 'black'
          }}
          searchIcon
          clearIcon
          onChangeText={text => params.handleSearch(text)}
          placeholder="Search"
          value={params.data}
        />
    };
  };

  constructor(props) {
    super(props);
    this.state = {
      value: '',
      data: []
    };
  }

    componentDidMount() {
    const { navigation } = this.props;
    navigation.setParams({
      handleSearch: this.handleSearch,
      data: this.getValue
    });
  }

  handleSearch = text => {
    const recipes = getRecipesFromApiByRecipeName(text); //need to get this to be able to call await.
      if (text == '') {
        this.setState({
          value: text,
          data: []
        });
      } else {
        this.setState({
          value: text,
          data: recipes
        });
      }
  };

  getValue = () => {
    return this.state.value;
  };

  onPressRecipe = item => {
    this.props.navigation.navigate('Recipe', { item });
  };

  renderRecipes = ({ item }) => (
    <TouchableHighlight underlayColor='rgba(73,182,77,0.9)' onPress={() => this.onPressRecipe(item)}>
      <View style={styles.container}>
        <Image style={styles.photo} source={{ uri: item.recipe.image }} />
        <Text style={styles.title}>{item.recipe.label}</Text>
      </View>
    </TouchableHighlight>
  );

  render() {
    return (
      <View>
        <FlatList
          vertical
          showsVerticalScrollIndicator={false}
          numColumns={2}
          data={this.state.data}
          renderItem={this.renderRecipes}
          keyExtractor={item => `${item.recipeId}`} //How does this work?
        />
      </View>
    );
  }
}

Answer 1

根据JavaScript的语法规则，关键字await只能在async函数中执行它需要执行的操作。

​

function a() {
  // await is not a keyword in a regular function
  var await = 5;
  console.log(await);
}

a()

async function b() {
//^^^
  // but it is a special keyword in an async function
  // by using await, we pause the code execution
  // until the promise we're awaiting one is fulfilled
  const x = await Promise.resolve(10);
  console.log(x);
}

b();

​

此规则也适用于箭头函数：

​

const a = () => {
  // await is not a keyword in a regular function
  var await = 5;
  console.log(await);
}

a()

const b = async () => {
  //      ^^^^^
  // but it is a special keyword in an async function
  // by using await, we pause the code execution
  // until the promise we're awaiting one is fulfilled
  const x = await Promise.resolve(10);
  console.log(x);
}

b();

​

在您的例子中，handleSearch是一个常规的箭头函数，因此await不能在其中工作。您需要使handleSearch成为await在食谱上的async函数：

handleSearch = async text => {
//             ^^^^^
    const recipes = await getRecipesFromApiByRecipeName(text);
//                  ^^^^^