ReferenceError: Невозможно найти переменную: фильмы в автозаполнении - PullRequest
Новая
       12

ReferenceError: Невозможно найти переменную: фильмы в автозаполнении

0 голосов
/ 16 марта 2020

Мне нужно использовать автозаполнение в моем приложении, я использую эту библиотеку, потому что она была единственной, которую я нашел https://www.npmjs.com/package/react-native-autocomplete-input

и таким образом она работает. 

import React, { Component } from 'react';
import Autocomplete from 'react-native-autocomplete-input';

export default class Registrar extends Component{
  state = {
    films: [],
    query: '',
  }

  componentDidMount() {
    const json = require('../assets/json/titles.json');
    const { results: films } = json;
    this.setState({ films });
  }

  findFilm(query) {
    if (query === '') {
      return [];
    }

    const { films } = this.state;
    const regex = new RegExp(`${query.trim()}`, 'i');
    return films.filter(film => film.title.search(regex) >= 0);
  }

  render() {

    const { query } = this.state;
    const films = this.findFilm(query);
    const comp = (a, b) => a.toLowerCase().trim() === b.toLowerCase().trim();

    return(
         <Autocomplete
          autoCapitalize="none"
          style={styles.input}
          autoCorrect={false}
          data={films.length === 1 && comp(query, films[0].title) ? [] : films}
          defaultValue={query}
          onChangeText={text => this.setState({ query: text })}
          placeholder="Enter the film title"
          renderItem={({ item }) => (
            <TouchableOpacity onPress={() => this.setState({ query: item.title })}>
              <Text style={styles.itemText}>
                {item.title} ({item.release_date})
              </Text>
            </TouchableOpacity>
          )}
        />
   }
}

Однако мой код должен быть внутри функции, как в примере ниже, но он генерирует следующую ошибку ReferenceError: Не удается найти переменную: films 

import React, { Component } from 'react';
import Autocomplete from 'react-native-autocomplete-input';

export default class Registrar extends Component{
  state = {
    films: [],
    query: '',
  }

  componentDidMount() {
    const json = require('../assets/json/titles.json');
    const { results: films } = json;
    this.setState({ films });
  }

  findFilm(query) {
    if (query === '') {
      return [];
    }

    const { films } = this.state;
    const regex = new RegExp(`${query.trim()}`, 'i');
    return films.filter(film => film.title.search(regex) >= 0);
  }

  renderInputField() {
      return (
          <Autocomplete
          autoCapitalize="none"
          style={styles.input}
          autoCorrect={false}
          data={films.length === 1 && comp(query, films[0].title) ? [] : films}
          defaultValue={query}
          onChangeText={text => this.setState({ query: text })}
          placeholder="Enter the film title"
          renderItem={({ item }) => (
            <TouchableOpacity onPress={() => this.setState({ query: item.title })}>
              <Text style={styles.itemText}>
                {item.title} ({item.release_date})
              </Text>
            </TouchableOpacity>
          )}
        />
      )
  }

  render() {

    const { query } = this.state;
    const films = this.findFilm(query);
    const comp = (a, b) => a.toLowerCase().trim() === b.toLowerCase().trim();

    return(
         {this.renderInputField()}
   }
}

Мне нужно, чтобы оно было внутри функции, потому что это поле должно появиться при ответе да в предыдущем вопросе

Пожалуйста, помогите мне!

1 Ответ

0 голосов
/ 16 марта 2020

Можете ли вы попробовать как следует. Просто добавьте construtor к вашему class

export default class Registrar extends Component{
  construtor(props){
    super(props)
    this.state = {
      films: [],
      query: '',
    }
  }
}

В противном случае проверьте номер строки ошибки (он будет отображаться с ошибкой), после чего вы сможете легко узнать, где она произошла.

...