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

Question

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

在 Card 组件中单击 Link 并在 Details 组件中显示它们后，我想继续查看卡片详细信息，所以我已经使用Redirect，如下:

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 请求(在浏览器)，但来自商店，那里有很多文章和笔记。

因此，我决定在 Details 组件的 mapStateToProps 中使用 ownProps:

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，对于example) 但我有一个错误，我得到 Cannot read property 'params' of undefined in line with 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属性的方法……我离解决方案更近了……

Answer 1

Details component is located inside Article component and there is no id...

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

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

或者(不推荐)从文章中钻取 Prop

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