1127 Это действительно хорошее начало. Однако есть несколько проблем с вашим кодом. Итак, давайте пройдемся по нему и посмотрим, где мы можем сделать некоторые улучшения.

Конструктор

Во-первых, в своем конструкторе вы делаете данные объектом, а не массивом. Плоские списки не работают с объектами, которые они работают с массивами, поэтому это немедленно вызовет у вас проблемы. Вы действительно должны удалить {} из-за restaurantList.

constructor() {
    super();
    this.state = {
        loading: false,
        data: {restaurantList}, // You shouldn't have {} around the restaurantList
        error: null,
    };
    this.arrayholder = []; // we also don't need this
}

Вы должны обновить свой конструктор до этого

constructor (props) {
  super(props);

  this.state = {
    loading: false,
    data: restaurantList, // notice we have no {} around restaurantList
    error: null,
    value: ''
  };
}

renderHeader

В вашей функции renderHeader вы используете onChange, а не onChangeText. onChange возвращает объект, но вы хотите, чтобы text было помещено в строку поиска. Вам нужно обновить функцию renderHeader, чтобы она была такой.

renderHeader = () => {
  return (
    <SearchBar
      placeholder="Type..."
      value={this.state.value}
      onChangeText={text => this.searchFilterFunction(text)} // now we are using the correct function to capture the text
    />
  );
};

searchFilterFunction

Есть несколько проблем с этой функцией. Сначала вы смотрите на this.arrayholder, который пуст. На самом деле нам не нужен дополнительный массив для хранения данных, так как мы можем просто использовать restaurantList, который мы импортировали ранее. Во-вторых, вы используете indexOf для строки, лучше использовать includes.

searchFilterFunction = text => {
  this.setState({
    value: text
  });

  const newData = restaurantList.filter(item => {
    const itemData = `${item.name.toUpperCase()} ${item.type.toUpperCase()}`;
    const textData = text.toUpperCase();
    return itemData.includes(textData); // this will return true if our itemData contains the textData
  });

  this.setState({
    data: newData
  });
};

FlatList

В вашем FlatList вы должны использовать реквизит extraData, поскольку это позволит FlatList обновляться при изменении базовых данных. Вы также должны добавить keyExtractor.

<FlatList
  keyExtractor={(item, index) => `${index}`}
  extraData={this.state} // <- add this prop
  data={this.state.data}
  renderItem={({ item }) => (
    <Text>{item.name} {item.type}</Text>
  )}
  ItemSeparatorComponent={this.renderSeparator}
  ListHeaderComponent={this.renderHeader}
/>

Собираем все вместе

Так что, если мы соберем все это вместе, добавим макет данных, чтобы мы могли проверить, работает ли он. Мы должны получить что-то вроде этого.

// mock the data as you didn't provide an example
const restaurantList = [
  {
    type: 'Italian',
    name: 'DiMaggio'
  },
  {
    type: 'Greek',
    name: 'Athena'
  }
];

export default class SearchScreen extends React.Component {
  static navigationOptions = {
    title: 'Search for Restaurants'
  };
  constructor (props) {
    super(props);

    this.state = {
      loading: false,
      data: restaurantList,
      error: null,
      value: ''
    };
  }

  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: '86%',
          backgroundColor: '#CED0CE',
          marginLeft: '14%'
        }}
      />
    );
  };

  searchFilterFunction = text => {
    this.setState({
      value: text
    });

    const newData = restaurantList.filter(item => {
      const itemData = `${item.name.toUpperCase()} ${item.type.toUpperCase()}`;
      const textData = text.toUpperCase();
      return itemData.includes(textData);
    });

    this.setState({
      data: newData
    });
  };

  renderHeader = () => {
    return (
      <SearchBar
        placeholder="Type..."
        value={this.state.value}
        onChangeText={text => this.searchFilterFunction(text)}
      />
    );
  };

  render () {
    if (this.state.loading) {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <ActivityIndicator />
        </View>
      );
    } else {
      return (
        <View style={styles.container}>
          <FlatList
            keyExtractor={(item, index) => `${index}`}
            extraData={this.state}
            data={this.state.data}
            renderItem={({ item }) => (
              <Text>{item.name} {item.type}</Text>
            )}
            ItemSeparatorComponent={this.renderSeparator}
            ListHeaderComponent={this.renderHeader}
          />
        </View>
      );
    }
  }
}

Закуска

Вы можете увидеть, как он работает на следующем перекусе https://snack.expo.io/@andypandy/flatlist-with-search [ 1134]