Невозможно зациклить и визуализировать FlatList внутри функции .map-реакции - PullRequest
Новая
       3

Невозможно зациклить и визуализировать FlatList внутри функции .map-реакции

1 голос
/ 25 марта 2019

Я пытаюсь визуализировать FlatList внутри компонента. Сам компонент находится внутри ScrollView.

Я использую функцию карты для циклического прохождения данных для передачи в компонент. Ранее я использовал ScrollView вместо FlatList. Он работал нормально, но рендерился медленно. Поэтому я решил использовать FlatList.

Вот мой код: 

    renderComp(){

        const { filtersView,cats,cats_title, clearStyle} = styles;

        const data = this.props.ingreds;

        const arr  = Object.entries(data);


        return arr.map(i=> { 
              const name= i[0]; 
              const items_obj = i[1];
              const items = Object.values(items_obj);

              return(

                <View key={name} style= {filtersView}>

                    <View style={cats}>

                      <Text  style ={cats_title}>{name}</Text>

                      <Text style={clearStyle}>Clear All</Text>
                    </View>


                    <View style={{justifyContent:'flex-start', alignItems:'flex-start'}}>

                      <FlatList 
                      style={{ marginRight:6}}  
                      data={items}
                      keyExtractor={(x,i)=> i.toString()}
                      renderItem={({item}) =>{
                      this.renderItems(item)
                      }}
                      />
                    </View> 
                  </View>

              )
        })

      }

А вот и компонент ScrollView: 

        <ScrollView contentContainerStyle={{alignItems:'flex-start', 
        justifyContent:'flex-start',flex:1, height:72}} >

            {this.renderComp()}

        </ScrollView>

И цикл останавливается после одной итерации.

Вот вывод: https://i.stack.imgur.com/yM151.png

Есть предложения?

1 Ответ

1 голос
/ 25 марта 2019

Метод ReactNative FlatList renderItem должен возвращать компонент? React.Element.В вашем случае используйте return this.renderItems или пропустите внутренние скобки.

https://facebook.github.io/react-native/docs/flatlist#renderitem

({item}) => this.renderItems(item)}
...