Исключение компонента (неопределенный не является объектом (оценка 'list.todos.фильтр")

#react-native #components #expo #undefined

Вопрос:

Я работаю над своим первым приложением React — все шло отлично, но внезапно я начал получать ошибку, упомянутую выше. Я не знаю о внесении каких-либо изменений в свой код, и поэтому мне, как абсолютному новичку, очень трудно обнаружить ошибку. Я уже два дня пытаюсь исправить код и подумываю о том, чтобы начать все сначала. Все, что я знаю, это то, что фильтр, похоже, является проблемой, но я действительно не вижу в этом ничего плохого. Я попытался найти ответ, но ничего из того, что я нашел, действительно не помогло мне решить эту проблему.

ошибка

И это мой код:

 import React from "react";
import { StyleSheet, Text, View, TouchableOpacity, Modal } from "react-native";
import colors from "../colors";
import TodoModal from "./TodoModal";

export default class TaskList extends React.Component {
  state = {
    showListVisible: false,
  };

  toggleListModal() {
    this.setState({ showListVisible: !this.state.showListVisible });
  }
  render() {
    const list = this.props.list;

    const completedCount = list.todos.filter(todo => todo.completed).length;
    const remainingCount = list.todos.length - completedCount;

1. ошибка говорит вам, что this.props.list это не определено. возможно, вам потребуется обработать случай, когда это не определено, TaskList или проверить в родительском компоненте, что логика получения этого list объекта верна и что он делает это правильно, когда он не определен

Ответ №1:

я предполагаю, что во время первоначального рендеринга this.props.list это null так . все, что вам нужно сделать, это иметь строку кода, чтобы защититься от этого.

   render() {
    const list = this.props.list;

    if (!list) return null; // or return some sort of loading element

    const completedCount = list.todos.filter(todo => todo.completed).length;
    const remainingCount = list.todos.length - completedCount;