修复 null is not an object error in react native

Question

我正在尝试将任务存储在 asyncstorage 中，但是一旦我在 TextInput 中输入一个字符，我就会收到 null is not an object (evaluating 'item.reminder_content') 错误。我似乎找不到这个问题，过去几个小时我一直坚持下去，任何想法我做错了什么

import React, {Component, useEffect, useState} from 'react';
import {
  Image,
  ImageBackground,
  TextInput,
  Text,
  TouchableOpacity,
  View,
  ScrollView,
} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import styles from '../components/Styling/reminder';
import Card from '../components/Card';

import Background from '../components/assets/reminder_back.png';
import back from '../components/assets/arrow_left.png';
import Add from '../components/assets/add.png';

export default class Reminder extends Component {
  constructor(props) {
    super(props);
    this.state = {
      reminder_content: '',
      reminders: [],
    };
  }

  Create_Task = async () => {
    let {reminder_content} = this.state;

    if (reminder_content !== '') {
      AsyncStorage.setItem('Reminder', reminder_content);
    }
  };

  componentDidMount = async() => {
    await AsyncStorage.getItem('Reminder').then(value => {
      this.state.reminders.push(value);
    });
  };

  render() {
    return (
      <View>
        <ImageBackground source={Background} style={styles.background} />
        <View style={styles.root}>
          <TouchableOpacity onPress={() => navigation.navigate('Dashboard')}>
            <Image source={back} style={styles.back} />
          </TouchableOpacity>
          <Text style={styles.title}>Reminders</Text>
        </View>
        <ScrollView style={styles.list}>
          {this.state.reminders.map(item => {
            return (
              <Card>
                <Text>{item.reminder_content}</Text>
              </Card>
            );
          })}
        </ScrollView>
        <View style={styles.container}>
          <TextInput
            placeholder="Create Reminder"
            style={styles.input}
            value={this.state.reminder_content}
            onChangeText={(reminder_content) => this.setState({reminder_content})}
          />
          <TouchableOpacity>
            <Image
              source={Add}
              onPress={() => this.Create_Task()}
              style={styles.add}
            />
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

Answer 1

Async Storage 只能存储字符串数据，所以为了存储对象数据需要先序列化。对于可以序列化为 JSON 的数据，您可以在保存数据时使用 JSON.stringify()，在读取数据时使用 JSON.parse()。

Create_Task = async () => {
    let {reminder_content, reminders} = this.state;

    if (reminder_content !== '') {
      AsyncStorage.setItem('Reminder', JSON.stringify(reminders.concat(reminder_content)));
    }
  };

  componentDidMount = async() => {
    await AsyncStorage.getItem('Reminder').then(value => {
      const newValue=JSON.parse(value);
      this.setState({reminders:reminders.concat(newValue)});
    });
  };