React Native State is Undefined Vasern

user_10901049 0
Viewed 134

I am actually starting with Mobile Development and React Native and I thought an interesting Database called Vasern But now I am trying to load things from my database with the componentDidMount() method but i actually just get this Error everytime. I am sure its just a trivial Error but i just cant find it...

Thanks in Advance

Error Image

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

import Vasern from 'vasern';
import styles from './styles';

const TestSchema = {
  name: "Tests",
  props: {
    name: "string"
  }
}

const VasernDB = new Vasern({
  schemas: [TestSchema],
  version: 1
})

const { Tests } = VasernDB;

var testList = Tests.data();

class Main extends Component {
  state = {
    tests: [],
  };

  constructor(props){
    super(props);

    this._onPressButton = this._onPressButton.bind(this);
    this._onPressPush = this._onPressPush.bind(this);
    this._onPressUpdate = this._onPressUpdate.bind(this);
    this._onPressDeleteAll = this._onPressDeleteAll.bind(this);
  }

  componentDidMount() {
    Tests.onLoaded(() => this._onPressButton());
    Tests.onChange(() => this._onPressButton());
  }

  _onPressButton = () => {
    let tests = Tests.data();
    console.log(tests);

    //if( tests !== undefined){
    this.setState({tests}); // here is the error
    //alert(tests);
    //}
    }
  

  _onPressPush = () => {
    Tests.insert({
      name: "test"
    }); 
    console.log(this.state.tests + "state tests"); //here the console only shows the text
  }

  _onPressUpdate = () => {
    var item1 = Tests.get();
    Tests.update(item1.id, {name: "test2"});
  }

  _onPressDelete = () => {

  }

  _onPressDeleteAll = () => {
    let tests = Tests.data();

    tests.forEach((item, i) => {
      Tests.remove(item.id)
    });
  }

  _renderHeaderItem({ section }) {
    return this._renderItem({ item: section});
  }

  _renderItem({ item }){
    return <View><Text>{item.name}</Text></View>
  }

  render() {
    //const { tests = [] } = this.props;
    return (
      <View style={styles.container}>
        <View>
          <TextInput> Placeholder </TextInput>
          <Button title="Press me for Show" onPress={this._onPressButton}/>
          <Button title="Press me for Push" onPress={this._onPressPush}/>
          <Button title="Press me for Update" onPress={this._onPressUpdate}/>
          <Button title="Press me for Delete" onPress={this._onPressDelete}/>
          <Button title="Press me for Delete All" onPress={this._onPressDeleteAll}/>
        </View>
        <View style={styles.Input}>      
          <SectionList
            style={styles.list}
            sections={this.state.tests}
            keyExtractor={item => item.id}
            renderSectionHeader={this._renderHeaderItem}
            contentInset={{ bottom: 30 }}
            ListEmptyComponent={<Text style={styles.note}>List Empty</Text>}
          />
        </View>
      </View>
    );
  }
}

export default Main;

react-native
1 Answers

Since Tests.data() will return an array (as list of records).

In React Native, you might use FlatList to display an array of records.


import { ..., FlatList } from 'react-native';

...
// replace with SectionList

<FlatList
    renderItem={this._renderItem}  // item view
    data={this.state.tests}        // data array
    style={styles.list}
    keyExtractor={item => item.id}
    contentInset={{ bottom: 30 }}
    ListEmptyComponent={<Text style={styles.note}>List Empty</Text>}
/>

In case you want to use SectionList, you will need to reform data into sections. Something like:

var sections = [
    {title: 'Title1', data: ['item1', 'item2']},
    {title: 'Title2', data: ['item3', 'item4']},
    {title: 'Title3', data: ['item5', 'item6']},
]

Besides, React Native is in a really good state. I think you will like it.

user_57759930
Related