使用MapStateToProps时遇props is undefined错误，求解决

看起来你遇到两个核心问题：一是props is undefined的错误，二是如何根据路由的id参数从Redux状态中获取对应的文章。咱们一步步来解决：

1. 修复props is undefined错误 #

你现在的组件用了对象解构来提取match：

const Article = ({match}) => (
  // ...组件内容
)

这意味着你只把match从props里解构出来了，并没有接收完整的props对象，所以console.log(props)自然会显示undefined。

解决方法有两种：

• 如果你需要用到其他props（比如article），把它们一起解构出来：

  const Article = ({ match, article }) => (
    <div className="aboutpage-wrapper">
      <div className="container">
        <h1>{match.params.id}</h1>
        {console.log({ match, article })} {/* 现在可以打印解构后的属性 */}
        {article && (
          <>
            <h2>{article.title}</h2>
            <h3>{article.subtitle}</h3>
            <p>{article.body}</p>
          </>
        )}
      </div>
    </div>
  );
  

• 如果你想保留完整的props对象，就不要用解构，直接接收props：

  const Article = (props) => (
    <div className="aboutpage-wrapper">
      <div className="container">
        <h1>{props.match.params.id}</h1>
        {console.log(props)} {/* 现在props就有值了 */}
        {/* ...其他内容 */}
      </div>
    </div>
  );
  

2. 根据路由ID获取对应文章 #

你现在的mapStateToProps直接取了state.articles[1]，这是固定索引的文章，没法根据路由的id动态获取。connect的mapStateToProps可以接收第二个参数ownProps，它包含了组件的所有props（包括路由的match对象），我们可以用它来匹配文章ID：

const mapStateToProps = (state, ownProps) => {
  // 从路由参数中获取文章ID
  const articleId = ownProps.match.params.id;
  // 在articles数组中找到id匹配的文章
  const article = state.articles.find(item => item.id === articleId);
  return { article };
};

这里用了数组的find方法来匹配ID，注意你的文章ID是字符串类型（比如'3'），所以直接用===比较就可以。

3. 处理文章不存在的边界情况 #

如果用户访问了一个不存在的id，find会返回undefined，所以在渲染的时候要做判断，避免报错，比如用&&短路求值，或者显示一个“文章不存在”的提示：

{article ? (
  <>
    <h2>{article.title}</h2>
    <h3>{article.subtitle}</h3>
    <p>{article.body}</p>
  </>
) : (
  <p>抱歉，该文章不存在</p>
)}

把这些修改整合起来，你的Article.js最终代码应该是这样的：

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

const Article = ({ match, article }) => (
  <div className="aboutpage-wrapper">
    <div className="container">
      <h1>{match.params.id}</h1>
      {article ? (
        <>
          <h2>{article.title}</h2>
          <h3>{article.subtitle}</h3>
          <p>{article.body}</p>
        </>
      ) : (
        <p>抱歉，该文章不存在</p>
      )}
    </div>
  </div>
);

const mapStateToProps = (state, ownProps) => {
  const articleId = ownProps.match.params.id;
  const article = state.articles.find(item => item.id === articleId);
  return { article };
};

export default connect(mapStateToProps)(Article);

这样应该就能解决你的问题啦！

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