问题

Question

无法使用 redux 读取未定义的属性 ERROR

2022-12-01

289

reactjs typescript redux react-redux

刷新浏览器时出现错误。

Uncaught TypeError: Cannot read properties of undefined (reading 'title')

并且它不断重复出现我的所有状态（ title 、 content 、 id ），直到我从下面的代码中删除它们...并且它工作正常，直到我刷新页面。

import React, { FC, useEffect } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import AddComment from 'src/components/ui/AddComment/AddComment';
import CommentSection from 'src/components/ui/CommentSection/CommentSection';
import PostContent from 'src/components/ui/PostContent/PostContent';
import PostHeader from 'src/components/ui/PostHeader/PostHeader';
import {useAppSelector } from 'src/store/app/hooks';

const Post: FC = () => {
  const { id } = useParams();
  const { posts } = useAppSelector((state) => state.post);

  return (
    <div>
      <PostHeader
        header={<h2>{posts.find(p => p.id === parseInt(id)).title}</h2>}
      >
        <div>
          {posts.find(p => p.id === parseInt(id)).content}
        </div>
      </PostHeader>
      <PostContent
        content={<div>{posts.find(p => p.id === parseInt(id)).content}</div>}
      />
      <AddComment id={id} />
      <CommentSection id={id} />
    </div>
  )
};

export default Post;

我也想阻止帖子在刷新后消失。

Answer 1

问题

基本问题是，当没有匹配时， Array.prototype.find 返回 undefined 。代码应该考虑到这一点，并妥善处理没有匹配的帖子对象的情况。

解决方案

我建议只搜索 posts 数组一次并保存结果。如果结果为真，则访问属性，否则呈现 null 或其他后备 UI。

示例：

const Post : FC = () => {
  const { id } = useParams();
  const { posts } = useAppSelector((state) => state.post);

  const post = posts.find(p => String(p.id) === id);

  if (!post) {
    return <div>No post here.</div>;
  }

  return (
    <div>
      <PostHeader header={<h2>{post.title}</h2>}>
        <div>{post.content}</div>
      </PostHeader>
      <PostContent content={<div>{post.content}</div>} />
      <AddComment id={id} />
      <CommentSection id={id} />
    </div>
  )
};

Answer 2

我不知道类型定义，但这与您尝试从 posts.find 获取属性有关。如果帖子查找不匹配（加载状态时不会发生这种情况），则将失败。

尝试将 nullisch 合并运算符添加到所有 Array.find 方法

<PostHeader header={<h2>{posts.find(p => p.id === parseInt(id))?.title}</h2>}>
    <div>{posts.find(p => p.id === parseInt(id))?.content}</div>
  </PostHeader>
  <PostContent content={<div>{posts.find(p => p.id === parseInt(id))?.content}</div>}/>
  <AddComment id = {id} />
  <CommentSection id = {id}/>