React-nativeベースのAPKが携帯電話でクラッシュする

Question

私はUdemy（インストラクターからの回答なし）で基本的な反応ネイティブコースを取った。最初の課題は、私が作った「To-Do」リストを作ることです。このページのすべての指示に従ってください： https://facebook.github.io/react-native/docs/signed-apk-android.html ビルドが成功し、インストール後にアプリケーションが起動しますが、入力フィールドを押すとアプリケーションがクラッシュします。どんなアイデアが間違っているのでしょうか？ これは私が問題がどこか別の場所ではかなり確信しているにもかかわらず、私のコードです：

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; 

私は提供することができ、他の関連情報について教えてください。

ありがとうございます！

Answer 1

componentWillMountの間に、とcompletedTasksの両方の状態が未定義に設定されているようです。新しい設定では、ストレージは空になり、タスクと完了したタスクの両方に対する応答は未定義になります。

応答が存在する場合、あなたはそうのように、簡単なチェックでcomponentWillMountを調整することができます。

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)}) 
     } 
     }); 
    },