Невозможно отобразить плоский список при поиске

Question

У меня есть представление списка, в котором компонент элемента списка разработан мной.Если я отображаю только listItem, он работает нормально, но после интеграции ih с SearchBar я не могу отобразить их, хотя могу получить объект, соответствующий определенному поиску

SearchListItem

import React from 'react';
import {Image, Text, View} from "react-native";


export default class SearchListItem extends React.Component
{

    render()
    {
        return (
            <View style={{flexDirection: 'row'}}>
                <Image source={{uri: this.props.src}}
                       style={{width: 50, height: 50, backgroundColor: '#fff'}} />

                <Text style={{height: 50, lineHeight: 50, width: '100%',textAlign: 'center', flex:1, backgroundColor: '#FFF'}}>{this.props.text}</Text>
            </View>
        )
    }
}

App.js

import React from 'react';
import {FlatList, StyleSheet, Text, TextInput, View} from 'react-native';
import SearchListItem from "./components/SearchListItem";
import { SearchBar } from 'react-native-elements';
import { includes } from 'lodash';

export default class App extends React.Component {


    constructor(props)
    {
        super(props);
        this.all_categories = [
            {
                "id": "1",
                "text": "abc",
                "src": "https://cdn-images-1.medium.com/max/1200/1*dIocy2HvI_BIpziOypf8ig.jpeg"
            },
            {
                "id": "2",
                "text": "dbef",
                "src": "https://cdn-images-1.medium.com/max/1200/1*dIocy2HvI_BIpziOypf8ig.jpeg"
            },

            {
                "id": "3",
                "text":"bghi",
                "src":"https://cdn-images-1.medium.com/max/1200/1*dIocy2HvI_BIpziOypf8ig.jpeg"
            },
            {
                "id": "4",
                "text":"jbkl",
                "src":"https://cdn-images-1.medium.com/max/1200/1*dIocy2HvI_BIpziOypf8ig.jpeg"
            }
        ];
        this.state = {text:"",
            categories: []
        }
    }

    search(text)
    {
        var searchResults = [];
        var categories = this.all_categories;
        for (var i = categories.length - 1; i >= 0; i--)
        {
            includes(categories[i]['text'], text) && searchResults.push(categories[i])
        }
        console.log("text searched is " + text);
        console.log(searchResults);
        return searchResults;
    }

    _keyExtractor = (item, index) => item.id;

    _renderItem(item)
    {
        console.log("item to render is");
        console.log(item);
        return <SearchListItem text={item.text} src={item.src}/>
    }

  render() {    
      console.log("rendered");
      console.log("categories to display are");
      console.log(this.state.categories);
      return (
          <View>
              <View style={{height:30,width:"100%"}}/>
              <SearchBar
                  round
                  lightTheme
                  containerStyle={{
                      backgroundColor:'transparent',
                      borderTopWidth: 0,
                      borderBottomWidth: 0,
                  }}
                  placeholder="Search!"
                  inputStyle = {{backgroundColor:'white'}}
                  onChangeText={ (text) =>
                  {
                      let result = this.search(text);
                      console.log("changing state");
                      this.setState({categories:result, text:text})
                  }}
                  value={this.state.text}
              />
              <FlatList style={{flex:1}}
                  removeClippedSubviews={false}
                  data={this.state.categories}
                  keyExtractor={this._keyExtractor}
                  renderItem={this._renderItem}
              />
          </View>
      )
  }
}

Поиск дает все действительные результаты, но не может отобразить список, соответствующий результатам. Что я сделал не так?

Answer 1

Запустив ваш код, я обнаружил две маленькие ошибки: первая - в параметре _renderItem, что должно быть похоже на

_renderItem({item})
{
    console.log("item to render is");
    console.log(item);
    return <SearchListItem text={item.text} src={item.src}/>
}

, как предполагает деструктурирование ( см. Документ ).

Во-вторых, ваш список не рендерится: попробуйте удалить это style={{flex:1}} в реквизитах FlatList.

Я только что создал snack , если вы хотите проверить это: