基于 React-Native 的 APK 在我的手机上崩溃

Question

所以我参加了关于 Udemy 的基本 react-native 课程（讲师没有回应）。第一个任务是制作一个“待办事项”列表，这是我制作的。遵循此页面上的所有说明： 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 设置了未定义的状态。在全新设置中，您的存储空间将是空的，并且任务和已完成任务的响应都将是未定义的。

您可以通过快速检查是否存在响应来调整 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)})
        }
      });
  },