Как получить данные из API на основе поиска пользователя в React Native?

Question

Цель состоит в том, чтобы позволить пользователю вводить ключевое слово в строку поиска, сохранять искомое слово или фразу в строку и отправлять запрос на публикацию на сервер фильмов и отображать результаты в формате FlatList.

Я не разбираюсь в javascript, но до сих пор мне удавалось сохранять входные данные для поиска в переменной и подтверждать их, регистрируя результаты поиска в консоли, но используя эту переменную для визуализации и отображения результатов в замешательстве

import React, { Component } from "react";
import { 
    View,
    Text,
    FlatList,
StyleSheet
} from "react-native";
import { Container, Header,Item,Input, Left, Body, Right, Button, Icon, 
 Title } from 'native-base';




class Search extends Component {
    constructor(props) {
       super(props);
        this.state = {text: ''};
        this.state = {
         dataSource: []
        }
      }
  renderItem = ({item}) => {

    return (

       <Text>{item.title}</Text>

)}

componentDidMount() {
    const apikey = "&apikey=thewdb"
    const url = "http://www.omdbapi.com/?s="
    fetch(url + this.state.text + url)
    .then((response) => response.json())
    .then((responseJson)=> {
        this.setState({
            dataSource: responseJson.Search

        })
    })
    .catch((error) => {
        console.log(error)
    })


}


render() {
    return (
        <Container>
            <Header
                searchBar rounded
            >
                <Item>
                    <Icon name="ios-search" />
                    <Input 
                        placeholder="Type here to translate!"
                        onChangeText={(text) => this.setState({text})}
                    />
                </Item>
                <Button
                transparent
                onPress={()=> {
                        {console.log(this.state.text)}
                        }
                    }
                >
                    <Text>Search</Text>
                </Button>
            </Header>
            <FlatList
                style={{flex: 1, width:300}}
                data={this.state.dataSource}
                keyExtractor={(item, index) => 'key'+index}
                renderItem={this.renderItem}
                />
        </Container>
         );
     }
}

export default Search;

const styles = StyleSheet.create({
    container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

Мой код немного неаккуратный, поэтому, пожалуйста, простите меня, я все еще новичок в кодировании.

Answer 1

Проблема в том, что вы извлекаете данные из API на componentDidMount, но они будут вызываться только один раз (когда компонент монтируется).

Так что лучший способ исправить это -

1. Создать функцию с именем fetchData

  fetchData(text) {
    this.setState({ text });
    const apikey = '&apikey=thewdb';
    const url = 'http://www.omdbapi.com/?s=';
    fetch(url + text + url)
      .then(response => response.json())
      .then((responseJson) => {
        this.setState({
          dataSource: responseJson.Search,
        });
      })
      .catch((error) => {
        console.log(error);
      });
  }

В onChangeText вызовите fetchData

  <Input
    placeholder="Type here to translate!"
    onChangeText={(text) => {
      this.fetchData(text);
    }}
  />