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

Question

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

在此处输入图像描述

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

在此处输入图像描述

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在此处为空对象。我的问题是如何将属性传递给mapStateToProps，或者我在这里做错了什么

Answer 1

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

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

然而，connectHOC正在注入collection道具，但ownProps只是一个空对象。

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

这里的问题是，您的选择器函数似乎需要id路由匹配参数才能工作，而只有通过useParams钩子进入函数组件范围后，该参数才可用。

你现在有几个选择。

1. 使用包装器组件"；啜饮"；id，并作为道具传递给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 />} /> 
   

2. 将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;
   

Answer 2

this.props.id不存在于react功能组件上。您使用useParams进行了销毁，做得很好。但在ownProps中，您没有id属性。所以你不能那样在selectCollection中通过它。你可以看看这个演示应用程序。希望它能帮助你了解如何设置这一切。

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);