AsyncStorage.getItem in componentDidMount

Question

我正在尝试创建一个简单的要做的应用程序来练习React本机，并且当componentDidMount时我很难检索到这些项。

应用程序state：

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

当用户添加一个新任务时，handleAddTask将运行，我将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}
/>

在List.js内部，我正在通过任务数组进行映射：

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

}

我得到了以下错误：

TypeError:未定义不是一个函数(计算'this.props.listItem.map')

我一直在评论行，看看问题出在哪里，我只能假设这是我在componentDidMount中获取条目的方式。

关于异步JavaScript，我遗漏了一些东西吗？而且，当我做JSON.parse时，我必须要做getItem吗？如果有人对我的代码有更多的反馈，我很想了解更多。

提前感谢！

Answer 1

保存到存储JSON.stringify()值，然后使用它而不使用JSON.parse()。我认为这才是问题所在。您可以在List组件呈现的断点上停止检查它，然后再映射它的道具，并检测您的props.listItems在componentDidMount之后不是数组。

Answer 2

AsyncStorage返回了一个承诺。因此，当调用检索componentDidMount中的项时，即使在检索值之前，代码也会运行传递.then。

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

第二个建议是使用await而不是.then，并在调用listenItem.map时使用助手函数，以便在加载了值之后才调用它。