React本机flatlist错误需要所有属性



我是React Native的新手。我正在做一个简单的应用程序,在其中添加一个人的名称和年龄在firebase中,然后在列表中显示,我在该项目中使用了flatlist,但是它要求导入Flatlist的所有属性。如果我仅添加2个诸如数据之类的属性,则RenderItem会出现错误,请帮助

在这里我的代码

import React from "react";
import {StyleSheet, View, Button, Text, FlatList, TextInput, ListView} from "react-native";
import firebase from  './firebase'
let db = firebase.firestore();
class TextInputExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            userName: '',
            userAge: '',
            input1Background: 'red',
            textColor1: 'white',
            input2Background: 'red',
            textColor2: 'white'
        };
    }
    componentDidMount(): void {
        db.collection('users')
            .onSnapshot((snapshot) => {
                snapshot.docChanges().forEach(change => {
                    if (change.type === 'added') {
                        this.state.data.push({
                                name: change.doc.get('name'),
                                age: change.doc.get('age')
                            });
                        console.log(this.state.data);
                    }
                })
            }, (error => {
                console.log(error.message);
            }))
    }
    addToDatabase = () => {
        let data = {
            name: this.state.userName,
            age: this.state.userAge
        };
        console.log(data);
        db.collection('users').add(data)
            .then(ref => {
            }).catch(msg => {
                console.log(msg);
            });
    };
    renderItem = ({item}) => {
      return(
          <View>
              <Text>{item.name}</Text>
              <Text>{item.age}</Text>
          </View>
      );
    };
    render(): React.Node {
        return (
          <View style={styles.container}>
            <TextInput
                placeHolder={'Enter name'} 
                onChangeText={(text) => this.setState( {userName: text} )}
            />
            <TextInput
              placeHolder={'Enter Age'}
              onChangeText={(text) => this.setState( {userAge: text} )}
            />
            <Button title={'Add'} onPress={() => this.addToDatabase()}/>
            <View>
             <FlatList
                data={this.state.data}
                renderItem={this.renderItem}
             />
            </View>
          </View>
        );
    }
}
export default TextInputExample;
const styles = StyleSheet.create({
    container: {
        flex: 1, alignSelf: 'center', alignItems: 'center'
    }
});

我认为您的error是因为您以错误的方式更新状态,如果您想在状态中的数组中添加元素,则必须使用setState方法和无法直接访问阵列并将其推开。

做这个

const newItem = {
  name: change.doc.get('name'),
  age: change.doc.get('age')
}
this.setState((prevState) => ({
 ...prevState,
 data: [...prevState, newItem]
}))

相关内容

  • 没有找到相关文章

最新更新