提交时反应原生元素搜索栏

Question

when im typing on the search bar and press submit the flatlist should render again making an api request but it doesnt The method makeRequest is not called in updateSearch and i dont know why

 <SearchBar
     placeholder="Type something here...."
     onChangeText={this.updateSearch}
     value={search}
 />

updateSearch = search => {
    this.setState({ search }, this.makeRequest);    
  };

makeRequest =  () => {

    const { page, search } = this.state;

    const apiKey = 'a40093f0-53ec-11ea-850a-fbf5bb8990e'

    const url =
            `https://api.harvardartmuseums.org/object?apikey=${apiKey}` +
            `&title=${search}`+
            `&fields=objectnumber,dated,century,division,primaryimageurl,title` +
            `&sort=totalpageviews` +
            `&page=${page}` +
            `&size=44` +
            `&hasimage=1` +
            `&sortorder=desc`;
    setTimeout(() => {
      fetch(url)
      .then((response) => response.json())
      .then((responseJson) => {
        const results = processExhibit(responseJson);
        this.setState({
          isLoading: false,
          dataSource: [...this.state.dataSource,...results],
          refreshing: false
        });

      });
    }, 1500);

  }

https://snack.expo.io/@overhype/885549

Answer 1

to avoid repeatly call API when user typing, using onSubmitEditing which fired when user click submit on soft keyboard

const [keywords, setKeywords] = React.useState('')

<Searchbar
  placeholder="Search Products ..." 
  onChangeText={(val) => { setKeywords(val) }}
  onSubmitEditing={()=>console.log(`User typed ${keywords}`)}
  value={keywords} 
/>

or replaced with

onSubmitEditing={({nativeEvent})=>console.log(nativeEvent.text)}

Answer 2

Please remove setTimeout as it might show results that are not related to what the user has typed. if you want to make a request with each key press just call makeRequest in updateSearch . Try adding min character length to minimise making requests with each key press.

updateSearch = search => {
  this.setState({ search }, () => this.makeRequest());
};

makeRequest = () => {
  const { page, search, minLength } = this.state;

  if (search && search.length < minLength) {
    return;
  }

  const url =
    `https://api.harvardartmuseums.org/object?apikey=${apiKey}` +
    `&title=${search}` +
    `&fields=objectnumber,dated,century,division,primaryimageurl,title` +
    `&sort=totalpageviews` +
    `&page=${page}` +
    `&size=44` +
    `&hasimage=1` +
    `&sortorder=desc`;

  fetch(url)
    .then(response => response.json())
    .then(responseJson => {
      console.log(responseJson);
      const results = processExhibit(responseJson);
      this.setState({
        isLoading: false,
        dataSource: [...this.state.dataSource, ...results],
        refreshing: false,
      });
    });
};

Answer 3

Hi please try with below

import React, { Component } from 'react';
import { View, Text, FlatList, Image } from 'react-native';
import PropTypes from 'prop-types';
import { Card, SearchBar } from 'react-native-elements';

const apiKey = 'a40093f0-53ec-11ea-850a-fbf5bb8990ef';

 const processExhibit = results => {
  const processed = 
    results.records.map(r => ({
      ...r,
      id: r.objectnumber
    }))
  return processed;
};

export default class FetchExample extends Component {

  constructor (props: {}) {
    super(props);

    this.state = {
        page: 1,
        isLoading: true,
        dataSource: [],
        refreshing: false,
        search: 'cat'
    };
  }

  componentDidMount () {
    this.makeRequest();
  }

  makeRequest =  () => {

    const { page, search } = this.state;
    const url =
            `https://api.harvardartmuseums.org/object?apikey=${apiKey}` +
            `&title=${search}`+
            `&fields=objectnumber,dated,century,division,primaryimageurl,title` +
            `&sort=totalpageviews` +
            `&page=${page}` +
            `&size=44` +
            `&hasimage=1` +
            `&sortorder=desc`;
    setTimeout(() => {
      fetch(url)
      .then((response) => response.json())
      .then((responseJson) => {
        const results = processExhibit(responseJson);
        this.setState({
          isLoading: false,
          dataSource: results,
          refreshing: false
        });

      });
    }, 1500);
  }

  renderItem = ({item, index}) => {

    if (!item) {
      return null
    }

    return (
      <View >
        <Card
          title={item.title}
          image={{uri: item.primaryimageurl}}>
          <Text style={{marginBottom: 10}}>
            Made in {item.dated}
          </Text>
       </Card>
      </View>
    );
  }

  keyExtractor = (item, index) => {
    return index.toString();
  }

  updateSearch = search => {
    this.setState({ search });  
    this.makeRequest(search);
  };

  handleLoadMore = () => {
    this.setState({ page: this.state.page + 1}, this.makeRequest)
  }

  handleRefresh = () => {

    this.setState({
      page: 1,
      refreshing: true,

    }),
    () =>
      this.makeRequest();
  }

  render () {
    const { search } = this.state;
    return (

      <View style={{flex: 1}}>

        <SearchBar
            placeholder="Type something here...."
            onChangeText={this.updateSearch}
            value={search}
        />
        <FlatList
          data={this.state.dataSource}
          keyExtractor={this.keyExtractor}
          renderItem={this.renderItem}
          refreshing={this.state.refreshing}
          onEndReached={this.handleLoadMore}
          onEndThreshold={100}
        />
      </View>
    );
  }
}

Snack : https://snack.expo.io/Sk!aRjR78