Question

我应该开发一个小应用程序来管理运动训练，在主页面中显示使用react-native-local-mondodb存储的所有“训练”，但加载应用程序它不会显示任何内容。我的代码哪里错了？

问题出在此代码中间的“listItem”组件中。 “start”和“mainStartNewTrainer”是使用react-native-navigator链接到其他页面。

Get-Process -Name explorer | Select-Object -Property Handles, @{N='RAM Working Set';E={Get-FriendlySize -Bytes $_.WorkingSet}}, CPU, Id, ProcessName

对不起我的英语：）

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>
        );
    }
}

React native不会返回多个组件

1 个答案: