react-native - 组件异常(未定义不是对象(评估'list.todos.filter')
问题描述
我正在开发我的第一个 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;
解决方案
我的猜测是,在初始渲染期间,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;
推荐阅读
- linux - 当我使用 cut 命令时,我得到了一个意想不到的结果
- android - Android Studio 中的 Gradle 任务是未知属性
- javascript - 为什么 React Link 更新的是 URL 而不是页面?
- heroku - Heroku 上的 Discord.js 找不到模块
- javascript - 如何检测javascript中的宽字符?
- python - python从子目录嵌套导入
- function - 在 Julia 中绘制具有 BigFloats 值的函数
- spring-boot - Redis 集群 Docker 编写
- python-3.x - 如何在每 3 行 pandas 之后选择第一行
- visual-studio - Visual Studio 奇怪的行为 - 移动组框不反映它在运行时的位置