修复 null is not an object error in react native

Posted 2023-05-07

【中文标题】修复 null is not an object error in react native

【英文标题】：Fix for null is not an object error in react native

【发布时间】：2022-01-21 06:55:35

【问题描述】：

我正在尝试将任务存储在 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>
    );
  

【参考方案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));
    );
  ;

【讨论】：

仍然出现同样的错误

@PureWare-LegendsOfGaming 如果你能分享整个代码，我会看看。

我问题上的代码是该组件的完整代码

我认为问题是在没有返回 null 的项目时将数据加载到状态，因此会出现错误