时间戳

首页 > 解决方案 > 为什么我的 add like 方法返回“无法读取未定义的属性”？

javascript - 为什么我的 add like 方法返回“无法读取未定义的属性”？

问题描述

我写了一个方法来处理点击时添加“喜欢”。它应该将 isLiked 切换到与先前状态相反的状态，并将 likes 计数增加 1。

我认为错误可能是由于状态冲突，但我不知道如何验证这一点。

addLike = postId => {
    this.setState({
        posts: this.state.posts.map(post => {
            if (post.id === postId) {
                return {
                    ...post,
                    likes: post.likes + 1,
                    isLiked: !post.isLiked
                };
            }
            return {
                post
            };
        })
    });
};

我期望 like 增加 1 并将 isLiked 设置为 true。但是，单击时我收到一个错误，它“无法读取未定义的属性”。

标签： javascriptreactjs

解决方案

您可以针对可能丢失的属性进行防御性编码：

if (post && post.id === postId) { // is it possible your posts array has `undefined` or `null` entry in it?
   return {
      ...post,
      likes: post.likes + 1; 
      isLiked: !post.isLiked
   };
...

在其他地方，尝试访问null或undefined对象上的属性可能会引发该异常。例如，是否state.posts正确填充或至少初始化为空数组[]？如果没有，this.state.posts.map也可能引发相同的错误。

此外，使用React DevTools 扩展来检查您的状态并检查值。

推荐阅读