无法使用 this.state.data.map() 在 react native firebase 中显示获取的数据

Question

我一直在使用 this.state.noteArray.map(val, key) 在我的页面上显示数据库项目。我打算使用删除按钮显示每个值，以将其从页面中删除。

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

import firebase from 'firebase';

// Initialize Firebase
    const config = {
        apiKey: "XXXXXXXXXXXXXXX",
        authDomain: "XXXXXXXXXXXXXXXXXXXXXX",
        databaseURL: "XXXXXXXXXXXXXXXXXXXXXXXX",
        projectId: "XXXXXXXXXXXXXXXXXXXXXX",
        storageBucket: "",
        messagingSenderId: "XXXXXXXXXXXXXXXXXXXX"
    };

  firebase.initializeApp(config);
export default class Main extends Component {
    constructor(props){
        super(props);
        this.state = {
            noteArray: [],
            noteText: '',
        };
        this.addNote = this.addNote.bind(this);
    }
    componentDidMount(){

        firebase.database()
        .ref()
        .child("todo")
        .once("value", snapshot => {
            const data = snapshot.val()
            if (snapshot.val()){
                const initNoteArray = [];
                Object
                .keys(data)
                .forEach(noteText => initNoteArray.push(data[noteText]));
                this.setState({
                    noteArray: initNoteArray
                });
            }
        });
        firebase.database()
        .ref()
        .child("todo")
        .on("child_added", snapshot => {
            const data = snapshot.val();
            if (data){
                this.setState(prevState => ({
                    noteArray: [data, ...prevState.noteArray]
                }))
                console.log(this.state.noteArray);
            }
        })
    }
    addNote(){
        // firebase function here to send to the database
        if (!this.state.noteText) return;
        var d = new Date();
        const newNote =  firebase.database().ref()
                              .child("todo")
                              .push ({
                                'date':d.getFullYear()+
                                "/"+(d.getMonth()+1) +
                                "/"+ d.getDate(),
                                'note': this.state.noteText
                            });
        newNote.set(this.state.noteText, () => this.setState({noteText: ''}))
    }
    render() {
        let notes = this.state.noteArray.map((val, key)=>{
            return
                    (<View key={key} keyval={key} val={val} style={styles.note}>
                <Text style={styles.noteText}>{this.state.val.date}</Text>
                <Text style={styles.noteText}>{this.state.val.note}</Text>
                <TouchableOpacity onPress={this.state.deleteMethod} style={styles.noteDelete}>
                    <Text deleteMethod={()=>this.deleteNote(key)} style={styles.noteDeleteText}>D</Text>
                </TouchableOpacity>
            </View>)
        });
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.headerText}>Todo App</Text>
                </View>
                <ScrollView style={styles.scrollContainer}>
                 {notes}
                </ScrollView>
                <View style={styles.footer}>
                    <TextInput 
                        style={styles.textInput}
                        placeholder='>note'
                        onChangeText={(noteText)=> this.setState({noteText})}
                        value={this.state.noteText}
                        placeholderTextColor='white'
                        underlineColorAndroid='transparent'>
                    </TextInput>
                </View>
                <TouchableOpacity onPress={ this.addNote } style={styles.addButton}>
                    <Text style={styles.addButtonText}>+</Text>
                </TouchableOpacity>
            </View>
        );
    }

    deleteNote(key){
        this.state.noteArray.splice(key, 1);
        this.setState({noteArray: this.state.noteArray});
    }
}

没有警告或错误，但没有显示任何内容。如果有任何帮助和内联评论来理解下一次的过程，我将不胜感激，我是一个新手，试图掌握未来类似项目的代码。我只想知道对 CRUD 和使用 React 原生 firebase 进行搜索的基本了解。非常感谢你

Answer 1

如果我正确理解您需要一种正确的方式来显示您的数据。由于noteArray 是一个数组，没有什么比FlatList 更简单的了，它可以自行滚动。 所以，在你的渲染方法中：

render() {
    return (
        <View style={styles.container}>
            <FlatList
              data={this.state.noteArray} // Here is where you pass your array of data
              renderItem={this.renderItem} // Here is how to display each item of your data array
              ListHeaderComponent={this.renderHeader}
              ListFooterComponent={this.renderFooter}
            />
        </View>
    );
}

地点：

renderHeader = () => {
    return (
        <View style={styles.header}>
            <Text style={styles.headerText}>Todo App</Text>
        </View>
    )
}

renderFooter = () => {
    return (
        <View>
            <View style={styles.footer}>
                <TextInput 
                    style={styles.textInput}
                    placeholder='>note'
                    onChangeText={(noteText)=> this.setState({noteText})}
                    value={this.state.noteText}
                    placeholderTextColor='white'
                    underlineColorAndroid='transparent'>
                </TextInput>
            </View>
            <TouchableOpacity onPress={ this.addNote } style={styles.addButton}>
                <Text style={styles.addButtonText}>+</Text>
            </TouchableOpacity>
        </View>
    )
}

renderItem = ({ item, index }) => {
    return (
        <View key={index} style={styles.note}>
            <Text style={styles.noteText}>{item.date}</Text>
            <Text style={styles.noteText}>{item.note}</Text>
            <TouchableOpacity onPress={this.state.deleteMethod} style={styles.noteDelete}>
                <Text deleteMethod={()=>this.deleteNote(index)} style={styles.noteDeleteText}>D</Text>
            </TouchableOpacity>
        </View>
    )
}

Answer 2

感谢您的支持。我已经查看了我的代码，它可以按我的意愿完美运行。我很乐意把它贴在这里，以防其他人需要工作或了解它。我使用 array.map() 函数来迭代项目。

import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    TextInput,
    ScrollView,
    TouchableOpacity
} from 'react-native';
import Note from './Note';
import firebase from 'firebase';

// Initialize Firebase
    const config = {
        apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXX",
        authDomain: "XXXXXXXXXXXXXXXXXXXXXX",
        databaseURL: "XXXXXXXXXXXXXXXXXXXXXXXX",
        projectId: "XXXXXXXXXXXXXXXXXXXXXXXXX",
        storageBucket: "",
        messagingSenderId: "XXXXXXXXXXXXXXXX"
    };

  firebase.initializeApp(config);
export default class Main extends Component {
    constructor(props){
        super(props);
        this.state = {
            noteArray: [],
            noteText: '',
        };
        this.addNote = this.addNote.bind(this);
    }
    componentDidMount(){

        firebase.database()
        .ref()
        .child("todo")
        .once("value", snapshot => {
            const data = snapshot.val()
            if (snapshot.val()){
                const initNoteArray = [];
                Object
                .keys(data)
                .forEach(noteText => initNoteArray.push(data[noteText]));
                this.setState({
                    noteArray: initNoteArray
                });
            }
        });
        firebase.database()
        .ref()
        .child("todo")
        .on("child_added", snapshot => {
            const data = snapshot.val();
            if (data){
                this.setState(prevState => ({
                    noteArray: [data, ...prevState.noteArray]
                }))
                console.log(this.state.noteArray);
            }
        })
    }
    addNote(){
        // firebase function here to send to the database
        if (!this.state.noteText) return;
        var d = new Date();
        const newNote =  firebase.database().ref()
                              .child("todo")
                              .push ();
        newNote.set({
            'date':d.getFullYear()+
            "/"+(d.getMonth()+1) +
            "/"+ d.getDate(),
            'note': this.state.noteText
        });
        this.setState({noteText:''});
    }

    render() {
        let notes = this.state.noteArray.map((val, key)=>{
            return <Note key={key} keyval={key} val={val}
                    deleteMethod={()=>this.deleteNote(key)}/>
        });
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.headerText}>Todo App</Text>
                </View>
                <ScrollView style={styles.scrollContainer}>
                 {notes}
                </ScrollView>
                <View style={styles.footer}>
                    <TextInput 
                        style={styles.textInput}
                        placeholder='>note'
                        onChangeText={(noteText)=> this.setState({noteText})}
                        value={this.state.noteText}
                        placeholderTextColor='white'
                        underlineColorAndroid='transparent'>
                    </TextInput>
                </View>
                <TouchableOpacity onPress={ this.addNote } style={styles.addButton}>
                    <Text style={styles.addButtonText}>+</Text>
                </TouchableOpacity>
            </View>
        );
    }


    deleteNote(key){
        this.state.noteArray.splice(key, 1);
        this.setState({noteArray: this.state.noteArray});
    }

}

我有另一个名为 Note.js 的 .js 组件用于显示模板。这包含在 Main.js 中，并在渲染后被引用。

import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
} from 'react-native';
export default class Note extends Component {
    render() {
        return (
            <View key={this.props.keyval} style={styles.note}>
                <Text style={styles.noteText}>{this.props.val.date}</Text>
                <Text style={styles.noteText}>{this.props.val.note}</Text>
                <TouchableOpacity onPress={this.props.deleteMethod} style={styles.noteDelete}>
                    <Text style={styles.noteDeleteText}>D</Text>
                </TouchableOpacity>
            </View>
        );
    }
}