Question

我正在尝试使用Firebase并执行搜索。我遇到的麻烦是，当我键入搜索文本时，列表数据没有被更新。

下面是我想出的代码

componentDidMount() {
    this.setState({loading: true});

    var merchants = new Array;

    merchantsRef.once('value').then((snapshot) => {
      snapshot.forEach((child) => {
        merchants.push({
          id: child.val().id,
          type:  child.val().type,
          attributes: {
            coming_soon: child.val().attributes.coming_soon,
            featured_image_url: child.val().attributes.featured_image_url,
            has_locations: child.val().attributes.has_locations,
            highlight: child.val().attributes.highlight,
            logo_url: child.val().attributes.logo_url,
            main_image_url: child.val().attributes.main_image_url,
            name: child.val().attributes.name,
            offer_active: child.val().attributes.offer_active,
            offer_cta_title: child.val().attributes.offer_cta_title,
            offer_ends_at: child.val().attributes.offer_ends_at,
            offer_starts_at: child.val().attributes.offer_starts_at,
            offer_teaser: child.val().attributes.offer_teaser,
            offer_terms: child.val().attributes.offer_terms,
            offer_text: child.val().attributes.offer_text,
            offer_url: child.val().attributes.offer_url,
            permalink: child.val().attributes.permalink,
            shop_url: child.val().attributes.shop_url,
          },
          _key: child.key
        })
      })
      this.setState({
        data: merchants,
        loading: false,
      })
      // console.log(this.state.data)
    }).catch((error) => {
      console.log('Error fetching retailer data:', error)
    })

  }

  searchFilterFunction = text => {

    merchantsRef.orderByChild('name').startAt(text.toString()).on('value', function(child) {
        console.log(child.val());
    });

  };

  _renderEmpty = () => {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <ActivityIndicator />
      </View>
    )
  }

  _renderItem = ({item}) => (
    <MerchantRow data={item} />
  )

  _keyExtractor = (item, index) => item._key;

  render() {
    if (this.state.loading) {
      console.log("Loading")
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <ActivityIndicator
            animating
            size="large"
          />
          <Text>Fetching shops...</Text>
        </View>
      )
    }
    return (
      <View style={styles.container}>
        <SearchBar
          placeholder='Search for retailers...'
          containerStyle={{backgroundColor: Colors.blue, borderTopWidth: 0, borderBottomWidth: 0}}
          inputStyle={{backgroundColor: Colors.snow}}
          onChangeText={text => this.searchFilterFunction(text)}
          autoCorrect={false}
        />
        <ScrollView style={styles.container}>
          <FlatList
            data={this.state.data}
            renderItem={this._renderItem.bind(this)}
            keyExtractor={this._keyExtractor}
            initialNumToRender={9}
            ItemSeparatorComponent={this._renderSeparator}
            removeClippedSubviews={false}
            ListEmptyComponent={this._renderEmpty}
          />
        </ScrollView>
      </View>
    )
  }

Answer 1

@ Paul'Whippet'McGuane，很高兴知道。这可能是因为this的上下文未定义。为了维护关键字this的上下文，您可以这样修改searchFilterFunction：

 searchFilterFunction = text => {
    const that = this;
    merchantsRef.orderByChild('name').startAt(text.toString()).on('value', function(child) {
        console.log(child.val());
        const val = child.val();
        that.setState({ data: val });
    });
  };

响应本机和Firebase搜索

1 个答案: