基於React-Native的APK在我的手機上崩潰

Question

所以我在Udemy上做了一個基本的反應本機課程（沒有教師的迴應）。第一項任務是製作一份「待辦事項」清單，我做了。按照此頁面上的所有說明： 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期間，您將tasks和completedTasks設置爲未定義的狀態。在全新設置中，您的存儲空間將爲空，並且對於任務和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)}) 
     } 
     }); 
    },