组件异常（undefined 不是对象（求值'list.todos.filter'）

Question

我正在开发我的第一个 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;

Answer 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;

组件异常（undefined 不是对象（求值'list.todos.filter'）

Component Exception (undefined is not an object (evaluating 'list.todos.filter')

components

undefined

react-native

expo