React-Native basierte APK stürzt auf meinem Handy

Question

Also nahm ich eine grundlegende Reaktion native Kurs auf Udemy (keine Antwort von Ausbilder). Die erste Aufgabe besteht darin, eine "To-Do" -Liste zu erstellen, die ich gemacht habe. Befolgen Sie alle Anweisungen auf dieser Seite: https://facebook.github.io/react-native/docs/signed-apk-android.html Haben einen erfolgreichen Build, und meine App startet nach der Installation, aber wenn ich das Eingabefeld drücken, stürzt es nur ab. Irgendeine Idee, was könnte falsch sein? Dies ist mein Code, obwohl ich bin mir ziemlich sicher, dass das Problem woanders:

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

const Main = React.createClass({ 
    getInitialState() { 
return ({ 
tasks: [], 
completedTasks:[], 
task:'' 
}) 
    }, 

componentWillMount() { 
AsyncStorage.getItem('tasks') 
.then((response) => { 
    this.setState ({tasks: JSON.parse(response)}) 
}); 
AsyncStorage.getItem('completedTasks') 
.then((response) => { 
    this.setState({completedTasks: JSON.parse(response)}) 
}); 
    }, 

componentDidUpdate() { 
    this.setStorage(); 
}, 

setStorage() { 
    AsyncStorage.setItem('tasks', JSON.stringify(this.state.tasks)); 
    AsyncStorage.setItem('completedTasks', JSON.stringify(this.state.completedTasks)); 

    }, 

    renderList(tasks){ 
return(
    tasks.map((task, index) =>{ 
    return(
    <View key={task} style={styles.task}> 
     <Text> 
     {task} 
     </Text> 
     <TouchableOpacity 
     onPress={()=>this.completeTask(index)} 
     > 
     <Text> 
      &#10003; 
      </Text> 
      </TouchableOpacity> 
     </View> 
    ) 
    }) 
) 
    }, 
    renderCompleted(tasks) { 
return (
    tasks.map((task, index) => { 
    return(
     <View key={task} style={styles.task}> 
     <Text style={styles.completed}> 
      {task} 
      </Text> 
      <TouchableOpacity 
      onPress={()=>this.deleteTask(index)} 
      > 
      <Text> 
       &#10005; 
       </Text> 
      </TouchableOpacity> 
      </View> 
    ) 
    }) 
) 
    }, 

deleteTask(index){ 
    let completedTasks = this.state.completedTasks; 
    completedTasks = completedTasks.slice(0, index).concat(completedTasks.slice(index+1)); 
    this.setState({completedTasks}); 
}, 

completeTask(index) { 
let tasks = this.state.tasks; 
tasks = tasks.slice(0, index).concat(tasks.slice(index+1)); 

let completedTasks = this.state.completedTasks; 
completedTasks = completedTasks.concat([this.state.tasks[index]]); 

this.setState({ 
    tasks, 
    completedTasks 
}); 


    }, 
    addTask() { 
    let tasks = this.state.tasks.concat([this.state.task]); 
    this.setState({tasks}) 

    }, 
    render() { 
    return (
    <View style={styles.container}> 
     <Text style={styles.header}> 
     Muli's To-Do 
      </Text> 
      <TextInput underlineColorAndroid={'transparent'} 
      style={styles.input} 
      onChangeText={(text) => { 
       this.setState({task: text}); 
      } } 
      onEndEditing={()=> this.addTask()} 
      /> 
      <ScrollView> 
{this.renderList(this.state.tasks)} 
      {this.renderCompleted(this.state.completedTasks)} 
       </ScrollView> 

      </View> 
    ) 
    } 
}) 

const styles = StyleSheet.create({ 
container: { 
    flex:1, 
    backgroundColor: '#3b5998' 

}, 
header: { 
color:'white', 
margin: 0, 
marginTop:10, 
textAlign: 'center', 
fontSize: 18 

}, 
task: { 
    elevation:5, 
    backgroundColor:'white', 
    flexDirection: 'row', 
    height: 60, 
    borderWidth:1, 
    borderColor: 'black', 
    justifyContent:'space-between', 
    alignItems:'center', 
    padding: 20, 
    margin: 2, 
    borderRadius: 5, 
}, 
input: { 
    elevation:10, 
    backgroundColor:'white', 
    height: 60, 
    borderWidth:1, 
    borderBottomWidth: 1, 
    borderRadius: 5, 
    borderColor:'black', 
    textAlign: 'center', 
    margin:10, 
    marginBottom:30, 
    fontSize:15, 
    color: '#3b5998', 
}, 
completed: { 
    color: '#555', 
    textDecorationLine: 'line-through' 
} 
}) 

module.exports = Main; 

Bitte lassen Sie mich über andere relevante Informationen weiß, dass ich zur Verfügung stellen kann.

Danke !!

Answer 1

Es scheint, dass Sie während componentWillMount den Status mit undefiniert für beide tasks und completedTasks festlegen. In der Neukonfiguration ist Ihr Speicher leer und die Antworten für Aufgaben und CompletedTasks sind nicht definiert.

Sie können die componentWillMount mit einer kurzen Überprüfung anpassen, wenn Reaktion vorhanden ist, etwa so:

componentWillMount() { 
    AsyncStorage.getItem('tasks') 
     .then((response) => { 
     if (response) { 
      this.setState({tasks: JSON.parse(response)}) 
     } 
     }); 
    AsyncStorage.getItem('completedTasks') 
     .then((response) => { 
     if (response) { 
      this.setState({completedTasks: JSON.parse(response)}) 
     } 
     }); 
    },