从 Redirect 获取 mapStateToProps 中的 ownProps.match.params.id

Posted 2023-02-22

【中文标题】从 Redirect 获取 mapStateToProps 中的 ownProps.match.params.id

【英文标题】：Get ownProps.match.params.id in mapStateToProps from Redirect

【发布时间】：2019-12-07 21:54:22

【问题描述】：

卡片组件显示文章数据或笔记数据。

我想在Card组件中点击Link并在Details组件中显示后进入卡片详细信息，所以我使用了重定向，如下：

import React,  Component  from 'react';
import  Redirect  from 'react-router-dom';
import Link from 'components/atoms/Link/Link';

class Card extends Component 
  state =  redirect: false ;
  toggleButtonDetails = () => this.setState( redirect: true );

  render() 
    const  _id, type  = this.props;
    const  redirect  = this.state;

    if (redirect) 
      return <Redirect push to=`/$type/$_id` />;
    

    return (
      <Link onClick=this.toggleButtonDetails>See details</Link>
    );
  


export default Card;

这很重要，因为我不想根据 URL 发送 notes\:id 请求或 articles\:id 请求（在浏览器中输入）而是从有很多文章和注释的商店获取详细信息。

所以，我决定在mapStateToProps 中使用ownProps 在Details 组件中：

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

const Details = ( activeItem ) => 
  const [item] = activeItem;
  return (
    <>
      <p>item.id</p>
      <p>item.type</p>
    </>
  );
;

const mapStateToProps = (state, ownProps) => (
  activeItem: state[ownProps.type].filter(item => item._id === ownProps.match.params.id),
);

export default connect(mapStateToProps)(Details);

点击Card 中的Link 后，我移动到正确的URL（例如http://localhost:3000/notes/5d3c87034532003a6c666a67），但我有一个错误，我得到Cannot read property 'params' of undefined 与activeItem: state[ownProps.type]... 一致。

当我在 mapStateToProps 中使用 console.log(ownProps) 时，我看到 ownProps 只包含 type 而没有 id。

当我将 ownProps.match.params.id 更改为 '5d3c87034532003a6c666a67' 时，我看到了正确的注释详细信息，但只有一个指定的注释 - 这很明显，但这意味着 store 工作正常，但我在 Details 中看不到 id 属性组件。

编辑：Details 组件位于Article 组件内，没有id...

const Article = () => (
  <Online>
    <Wrapper>
      <Header>Your article</Header>
      <Details type="articles" />
    </Wrapper>
  </Online>
);

export default Article;

这应该是一种传递id属性的方法...我更接近解决方案...

【参考方案1】：

Details 组件位于 Article 组件内部，没有 身份证...

嗯，你是对的。 Details 永远不会得到 match 属性。您需要使用withRouter HOC。

export default connect(mapStateToProps)(withRouter(Details))

或者（不推荐）来自Article的钻孔道具

const Article = (props) => (
  <Online>
    <Wrapper>
      <Header>Your article</Header>
      <Details type="articles" ...props />
    </Wrapper>
  </Online>
);