react-native - ReferenceError：找不到变量：自动完成中的电影

Question

我需要在我的应用程序中使用自动完成功能，我正在使用这个库，因为它是我找到的唯一一个 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: Can't find variable: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()}
   }
}

我需要它在函数中，因为在上一个问题中回答“是”时必须出现此字段

请帮我！

标签： react-nativevariablesautocomplete

Answer 1

你可以尝试如下。只需添加construtor到您的class

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

否则检查错误行号（它将与错误一起显示），然后您可以轻松找出它发生的位置。