React-Redux中props.article可打印但属性读取失败的问题

我有一个Article组件，通过Redux存储所有文章数据，用mapStateToProps映射props来展示指定文章。执行console.log(props.article)能正常输出，但尝试读取props.article.title或其他属性时，会报错Cannot read property 'id' of undefined。

我的Article.js代码如下：

import React from 'react';
import { connect } from 'react-redux';

const Article = props => (
  <div className="aboutpage-wrapper">
    <div className="container">
      { console.log(props.article)}
      {/* <h2>{props.article.title}</h2>
      <h3>{props.articlesubtitle}</h3>
      <p>{props.article.body}</p> */}
    </div>
  </div>
);

const mapStateToProps = (state,props) => ({
  article: state.articles.find(function (article) {
    return article.id === props.match.params.id;
  })
});

export default connect(mapStateToProps)(Article);

嘿，我来帮你捋清楚这个问题！ #

这个报错的核心原因其实很简单：组件首次渲染时，props.article是undefined，你直接去读它的属性自然就炸了。至于为什么console.log(props.article)看起来正常，是因为React的渲染是异步的——当你打开控制台看输出时，Redux里的文章数据可能已经加载完成，props.article已经有值了，但组件第一次渲染时的错误早已经发生了。你可以试试右键点击控制台里的props.article，选择“Store as global variable”，然后查看这个变量的初始快照，就能看到它一开始确实是undefined。

具体触发场景有两种：

• 异步加载延迟：如果你的文章数据是通过API请求获取的，组件首次渲染时state.articles可能还是个空数组，Array.find()在空数组上执行会返回undefined。
• 找不到匹配的文章：如果props.match.params.id对应的文章根本不存在于state.articles里，find()同样会返回undefined。

几种靠谱的解决方法 #

1. 条件渲染（最稳妥的方案） #

在渲染文章内容前，先判断props.article是否存在，这样既避免报错，还能给用户友好提示：

const Article = props => (
  <div className="aboutpage-wrapper">
    <div className="container">
      {props.article ? (
        <>
          <h2>{props.article.title}</h2>
          <h3>{props.article.subtitle}</h3>
          <p>{props.article.body}</p>
        </>
      ) : (
        <p>要么在加载中，要么找不到这篇文章哦～</p>
      )}
    </div>
  </div>
);

2. 可选链操作符（ES2020+，写起来最简洁） #

如果你的项目支持ES2020及以上的语法，用?.操作符可以安全访问属性，即使props.article是undefined也不会报错：

const Article = props => (
  <div className="aboutpage-wrapper">
    <div className="container">
      <h2>{props.article?.title}</h2>
      <h3>{props.article?.subtitle}</h3>
      <p>{props.article?.body}</p>
    </div>
  </div>
);

这种方式会在props.article不存在时返回undefined，页面不会崩溃，只是对应位置显示空白而已。

3. 给article设置默认空对象 #

在mapStateToProps里，当find()返回undefined时，用空对象兜底，这样读取属性时就不会报错了：

const mapStateToProps = (state, props) => ({
  article: state.articles.find(article => article.id === props.match.params.id) || {}
});

不过要注意，这种方式如果后续有依赖article.id的逻辑，可能会得到undefined，还是结合条件渲染一起用更保险。

4. 处理异步加载状态（如果数据是异步获取的） #

如果你的文章数据是从API拉取的，建议在Redux状态里加一个loading字段，用来判断是否还在加载中：

// 先在mapStateToProps里把loading状态也拿过来
const mapStateToProps = (state, props) => ({
  article: state.articles.find(article => article.id === props.match.params.id),
  isLoading: state.articles.loading // 假设你的Redux状态里有这个字段
});

// 组件里根据状态渲染
const Article = props => {
  // 加载中显示提示
  if (props.isLoading) return <p>正在加载文章...</p>;
  // 找不到文章显示提示
  if (!props.article) return <p>抱歉，没找到这篇文章😅</p>;
  
  // 有数据再渲染内容
  return (
    <div className="aboutpage-wrapper">
      <div className="container">
        <h2>{props.article.title}</h2>
        <h3>{props.article.subtitle}</h3>
        <p>{props.article.body}</p>
      </div>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Uj Corb