React native не возвращает несколько компонентов

Question

Мне следует разработать небольшое приложение для управления спортивными тренировками, на главной странице которого показаны все «тренировки», сохраненные с использованием response-native-local-mondodb, но при загрузке приложения ничего не отображается.Где неправильный мой код?

проблема в компоненте "listItem" в середине этого кода.«start» и «mainStartNewTrainer» - это ссылки на другие страницы, использующие реагировать-native-навигатор.

import React, {Component} from 'react';
import {
    Text,
    View,
    StyleSheet,
    Button,   
    ScrollView,
    TouchableOpacity,
    Dimensions} from 'react-native';

import Icon from 'react-native-vector-icons/MaterialIcons';
import Datastore from 'react-native-local-mongodb';

import Trainer from '../../components/Trainer/Trainer';

import startNewTraining from '../starts/startNewTraining/startNewTraining';
import startMainApp from '../starts/startMainApp/startMainApp';

let mioDB = new Datastore({filename:'mioDB',autoload:true});

class MainPage extends Component{  

    mainStartNewTrainer=()=>{
        startNewTraining();
    };
    start=()=>{
        startMainApp();
    };    
    render(){
        let addTraining=(
            <Icon 
                size={Dimensions.get('window').height<600?40:60} 
                name='add-circle-outline' 
                color='black'/>
        );
//then the component with problems

        let listItem=(
            mioDB.find({},(err,docs)=>{
                docs.map((training)=>{
                    console.log(training);                  
                    return <Trainer 
                            icon='A'
                            key={training._id} 
                            onPress={this.start} 
                            style={{width:'100%',height:'100%'}} 
                            titleTrainer={training.trainingTitle}
                            />
                })
            })
        );       
        return(
            <View style={styles.container}>
                <Text style={styles.title}>Make your choice</Text>
                <View style={styles.containerTrainers}>
                    <ScrollView horizontal={false} 
                        contentContainerStyle={styles.scrollContainer} 
                        bounces={false}>
                        <Trainer 
                            onPress={this.mainStartNewTrainer} 
                            icon={addTraining} 
                            titleTrainer='Add new training'/>
                        {listItem}
                    </ScrollView>
                </View>
            </View>
        );
    }
}
const styles=StyleSheet.create({
    container:{
        alignItems:'center',
        backgroundColor:'#8D0C42',
        height:'100%',
        justifyContent:'flex-start',
        width:'100%',
    },
    containerTrainers:{
        flexDirection:'row',
        width:'90%',
    },
    scrollContainer:{              
        flexWrap:'wrap',
        width:'100%',
    },
    title:{
        color:'black',
        fontFamily:'Aclonica',
        fontSize:Dimensions.get('window').height<600?20:35,
        marginBottom:'3%',
        marginTop:'3%',
        maxWidth:'80%',
        textAlign:'justify',
    },
});
export default MainPage;

Извините за мой английский:)

Answer 1

Проблема в том, что вы не присваиваете значение listItem, оно всегда равно нулю, поэтому ничего не обрабатывается.

Я бы порекомендовал вам использовать state для сохранения ваших данных, а затемсделать то, что там.Например:

class MainPage extends Component{  

    state = {
      list: [], // Initialize the state with an empty list
    };

    componentDidMount() {
      mioDB.find({},(err,docs)=>{
         // Update the state with values saved
         this.setState({ list: docs });
      });
    }

    mainStartNewTrainer=()=>{
        startNewTraining();
    };
    start=()=>{
        startMainApp();
    };    
    render(){
        let addTraining=(
            <Icon 
                size={Dimensions.get('window').height<600?40:60} 
                name='add-circle-outline' 
                color='black'/>
        );

        // Render items in the state
        let listItem= this.state.list.map((training)=>{
                    console.log(training);                  
                    return <Trainer 
                            icon='A'
                            key={training._id} 
                            onPress={this.start} 
                            style={{width:'100%',height:'100%'}} 
                            titleTrainer={training.trainingTitle}
                            />
                })
            });

        return(
            <View style={styles.container}>
                <Text style={styles.title}>Make your choice</Text>
                <View style={styles.containerTrainers}>
                    <ScrollView horizontal={false} 
                        contentContainerStyle={styles.scrollContainer} 
                        bounces={false}>
                        <Trainer 
                            onPress={this.mainStartNewTrainer} 
                            icon={addTraining} 
                            titleTrainer='Add new training'/>
                        {listItem}
                    </ScrollView>
                </View>
            </View>
        );
    }
}