React Native State是未定义的Vasern

Question

我实际上是从Mobile Development和React Native开始的，我想过一个有趣的名为Vasern的数据库，但是现在我正尝试使用componentDidMount（）方法从数据库中加载内容，但实际上我每次都遇到此错误。 我确定它只是一个小错误，但是我找不到它...

预先感谢

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;

Answer 1

由于Tests.data()将返回一个数组（作为记录列表）。

在React Native中，您可以使用FlatList来显示记录数组。

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>}
/>

如果要使用SectionList，则需要将数据重新划分为多个部分。像这样：

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

此外，React Native处于良好状态。我想你会喜欢的。