Реагировать на собственную ошибку Flatlist требует всех атрибутов - PullRequest
Новая
       3

Реагировать на собственную ошибку Flatlist требует всех атрибутов

0 голосов
/ 17 марта 2019

Я новичок, чтобы реагировать на родных.Я делаю простое приложение, в котором я добавляю имя и возраст человека в firebase, а затем показываю его в списке. Я использую flatList в этом проекте, но он просит импортировать все атрибуты flatList.если я добавляю только 2 атрибута, таких как data, то 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'
    }
});

1 Ответ

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

Я думаю, что error - это потому, что вы обновляете свое состояние неверным образом, если вы хотите добавить элемент в массив в своем состоянии, вы должны сделать это с помощью метода setState, а не напрямую обращаться к массив и нажмите его.

Сделай это 

const newItem = {
  name: change.doc.get('name'),
  age: change.doc.get('age')
}

this.setState((prevState) => ({
 ...prevState,
 data: [...prevState, newItem]
}))
...