AsyncStorage.getItem 在 componentDidMount

Question

我正在尝试创建一个简单的待办事项应用程序来练习 React-Native，但在 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));
    }
  );

};

但是，我正在尝试从 componentDidMount 中的 AsyncStorage 检索任务数组，如下所示：

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: undefined 不是函数（计算 'this.props.listItem.map'）

我一直在这里和那里评论行以查看问题出在哪里，我只能假设这是我在 componentDidMount

中获取项目的方式

关于异步 JavaScript 有什么我错过的吗？另外，我做 getItem 时是否必须 JSON.parse ？如果有人对我的代码总体上有其他反馈，我很乐意了解更多信息。

提前致谢！

Answer 1

AsyncStoragereturns一个承诺。因此，当您调用检索 componentDidMount 中的项目时，代码将运行传递给 .then，甚至在检索值之前。

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

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

Answer 2

您将 JSON.stringify() 值保存到存储器中，然后在未使用 JSON.parse() 的情况下使用它。我认为这是问题所在。您可以通过在 List 组件渲染的断点处停止来检查它，然后再映射其道具，并检测到您的 props.listItems 在 componentDidMount.

之后不是数组

AsyncStorage.getItem 在 componentDidMount

AsyncStorage.getItem in componentDidMount

javascript

reactjs

react-native

asyncstorage