React-routing v6 无法将组件道具传递给 mapStateToProps

Question

我刚开始尝试做一个简单的项目。我的问题是我试图将组件道具传递给 mapStateToProps 但我做不到。我读到我应该将 ownProps 作为参数传递给 mapStateToProps，但它始终为空。

enter image description here

<Routes>
    <Route path="/" exact={true} element={<CollectionsOverview />} />
    <Route path="/:id" element={<CollectionPage />} /> 
</Routes>

enter image description here

    const CollectionPage = ({ collection }) => {
    const { id } = useParams();
    this.props.id = id;
    const { title, items } = collection;
    return (
        <CollectionPageContainer>
            <Title>{title}</Title>
            <ItemsContainer>
                {
                    items.map(item => <CollectionItem key={item['id']} item={item} />)
                }
            </ItemsContainer>
        </CollectionPageContainer>
    )
}

const mapStateToProps = (state, ownProps) => {
    console.log(ownProps);
    return {
        collection: selectCollection(ownProps.id)(state)
    }
}

ownProps 是空对象 here.My 问题是我如何将属性传递给 mapStateToProps 或者我在这里做错了什么

Answer 1

this.props.id 在 React 功能组件上不存在。你用 useParams 解构是正确的。但是在 ownProps 你没有 id 属性。所以你不能像那样在 selectCollection 中传递它。你可以看看this demo App。希望它能帮助您了解如何进行所有设置。

import { useParams } from "react-router-dom";
import { connect } from "react-redux";

const CollectionPage = ({ collection }) => {
  const { id } = useParams();
  //this.props.id = id;
  console.log(id);
  const { title, items } = collection;

  return (
    <div>
      <div>{title}</div>
      <div>
        {items.map((item) => (
          <div key={item["id"]} item={item} />
        ))}
      </div>
    </div>
  );
};

const mapStateToProps = (state, ownProps) => {
  console.log(ownProps.collection.items[0].id); //this is how you can access an  ID from your items
  /*     return {
      collection: selectCollection(ownProps.id)(state)
  } */
};

export default connect(mapStateToProps)(CollectionPage);

Answer 2

从组件使用中可以明显看出，绝对没有任何道具从路由传递给它。

<Route
  path="/:id"
  element={<CollectionPage />} // <-- no props passed to CollectionPage
/>

connect HOC 正在注入 collection 道具，但 ownProps 只是一个空对象。

const mapStateToProps = (state, ownProps) => {
  console.log(ownProps);
  return {
    collection: selectCollection(ownProps.id)(state)
  }
}

这里的问题是您的选择器函数似乎需要 id 路由匹配参数才能工作，并且只有在您通过 useParams勾.

你现在有几个选择。

使用包装器组件从参数中“吸取”id 并作为 prop 传递给 CollectionPage 组件

const CollectionPageWrapper = (props) => {
  const { id } = useParams();
  return <CollectionPage id={id} {...props} />
};

...

const CollectionPage = ({ collection }) => {
  const { title, items } = collection;
  return (
    <CollectionPageContainer>
      <Title>{title}</Title>
      <ItemsContainer>
        {items.map(item => <CollectionItem key={item.id} item={item} />)}
      </ItemsContainer>
    </CollectionPageContainer>
  );
};

const mapStateToProps = (state, ownProps) => {
  collection: selectCollection(ownProps.id)(state)
};

export default connect(mapStateToProps)(CollectionPageWrapper);

...

<Route path="/:id" element={<CollectionPage />} />

将 selectCollection 选择器逻辑移动到 CollectionPage 并使用 useSelector 钩子并传入带有 id

的选择器

const CollectionPage = () => {
  const { id } = useParams();
  const collection = useSelector(selectCollection(id));

  const { title, items } = collection;

  return (
    <CollectionPageContainer>
      <Title>{title}</Title>
      <ItemsContainer>
        {items.map(item => <CollectionItem key={item.id} item={item} />)}
      </ItemsContainer>
    </CollectionPageContainer>
  );
};

export default CollectionPage;

React-routing v6 无法将组件道具传递给 mapStateToProps

React-routing v6 can't pass component props to mapStateToProps

reactjs

react-router

react-redux