Question

我写了一种方法来处理点击时添加“赞”的问题。应该将isLiked切换到与先前状态相反的状态，并且将喜欢计数增加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
            };
        })
    });
};

我原本希望增加1，并将isLiked设置为true。但是，单击时出现错误，提示它“无法读取未定义的属性”。

Answer 1

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

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 extension检查状态并检查值。

Answer 2

如果您的setState应该依赖于先前的状态，那么最好使用带有updater函数的语法。像

   this.setState(({posts, ...restOfTheState}) => 
      ({ 
         posts: posts.map( // mapping logic here
         ...restOfTheState,
      });

顺便说一句，state.posts 已被初始化，对吧？

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

2 个答案: