Javascript componentDidMount中的AsyncStorage.getItem

我正在尝试创建一个简单的to-do应用程序来练习React Native，当

componentDidMount

应用程序

状态

：

this.state = {
  task: "",
  tasks: []
};

当用户添加新任务时，

HandLeadTask

运行，我附加了

AsyncStorage.setItem

作为

setState

的回调，以便更新状态后任务数组保存到存储器中

handleAddTask = () => {

  let notEmpty = this.state.task.trim().length > 0;
  if (notEmpty) {
    this.setState(
      prevState => {
        return {
          tasks: prevState.tasks.concat(prevState.task)
        };
      },() => {
        AsyncStorage.setItem("tasks", JSON.stringify(this.state.tasks));
      }
    );
  }

};

类似地，当用户点击列表项

handleDelete

运行时，它会从任务数组中删除所选任务并更新

AsyncStorage

handleDelete = index => {

  this.setState(
    prevState => {
      return {
        tasks: prevState.tasks.filter((place, i) => {
          return i !== index;
        })
      };
    },() => {
      AsyncStorage.setItem("tasks", JSON.stringify(this.state.tasks));
    }
  );

};

但是，我试图从

AsyncStorage

内部

componentDidMount

检索任务数组，如下所示：

componentDidMount() {
  AsyncStorage.getItem("tasks")
    .then(value => {
      this.setState({ "tasks": value });
    })
    .done();
}

我显示任务列表的方式是通过名为

list

的组件传递状态：

<List
  listItems={this.state.tasks}
  handleDelete={this.handleDelete}
/>

我得到以下错误：

TypeError:undefined不是函数（计算'this.props.listItem.map'）

我一直在各处对行进行注释，以了解问题所在，我只能假设这是我在

componentDidMount

我是否遗漏了异步JavaScript的某些方面？ 另外，当我执行

getItem

时，是否必须

JSON.parse

？ 如果有人对我的代码有更多的反馈，我想了解更多

---

提前谢谢

异步存储

返回承诺。因此，当您调用以检索

componentDidMount

中的项目时，代码将通过

运行。然后，甚至在检索值之前，代码也将运行

我的建议是，给listItem一些虚拟对象，这样它在第一次调用时就不是未定义的

第二个建议是使用
wait
而不是
。然后在调用listenItem.map时使用一个helper函数，以便在加载值之前不会调用它。
您将值保存到存储
JSON.stringify（）
值中，然后在不使用
JSON.parse（）
的情况下使用它。我认为这就是问题所在。在映射其道具之前，您可以通过在
列表中的断点处停止来检查它，并检测
道具.listItems
在
componentDidMount
之后是否不是数组。我尝试使用
JSON.parse（value）
在设置任务状态时，但我仍然存在相同的问题。我通过检查
then（）
承诺中返回的
值
，并仅在
值
不为
空
时设置状态来解决问题。如果保存损坏的值，则没有任何东西可以帮助您解析它们。如果你想用
JSON.strigify（）
保存好的值，那么你什么都不能做，那么
JSON.parse（）
当你要取回它们时，你就什么都不能做了。所以对于空值，您应该首先检查，为什么有空值？
export default class List extends Component {

  render() {

    const namesOutput = this.props.listItems.map((name, i) => (
      <TouchableOpacity
        key={i}
        onPress={() => this.props.handleDelete(i)}
        activeOpacity={0.6}
        style={styles.listItemContainer}
      >
        <Text style={styles.listItemText}>{name}</Text>
      </TouchableOpacity>
    ));

    return (
      <View style={styles.listContainer}>
        <ScrollView>{namesOutput}</ScrollView>
      </View>
    );
  }

}