- 我在 redux 中使用“reselect”庫來獲取資料。我想根據
useParams()鉤子獲取資料，然后將其傳遞到mapStatetoPropsas然后傳遞ownProps給selectionCollection函式，它是一個選擇器并接受useParams(). 顯然，它無法識別useParams()asownProps并最終回傳 undefined。順便說一句，如果我在里面傳遞一個字串selectionCollection('someString)，我會收到資料但不使用useParams()鉤子。我確實收到了useParams value successfully但不能在里面使用它mapStateToProps，我認為這是一個范圍問題。我確實定義了一個全域變數，但沒有用。
import { connect } from 'react-redux';.
import { Outlet, useParams } from 'react-router-dom';
import { selectCollection } from '../../redux/shop/Shop-selectors';
const CollectionPage = ({ collection }) => {
const params = useParams();
const paramsId = params.collectionId;
console.log(collection);
return (
<div className="collection-page">
<p>THis is the collection page for {paramsId}</p>
<Outlet />
</div>
);
};
//-- If I log the 'paramsId', I get undefined since it's outside the function
const mapStateToProps = (state, ownProps) => ({
// here is where I wanna use the paramsId as ownProps
collection: selectCollection(ownProps.paramsId)(state),
});
export default connect(mapStateToProps)(CollectionPage);
uj5u.com熱心網友回復：
我認為您可以通過不同的方式實作這一點，但我建議您使用兩種方法來使用來自 useParams Hook 的引數并將其與 react redux 混合
1- 創建另一個頂級組件以獲取其中的路由器引數并將它們傳遞給 CollectionPage 組件，因此在 mapStateToProps 中，您可以像這樣訪問這些引數：
const TopLevelCollectionPage = () => {
const params = useParams();
<CollectionPage params={params}></CollectionPage>;
};
const CollectionPage = ({ collection }) => {
return (
<div className="collection-page">
<p>THis is the collection page</p>
<Outlet />
</div>
);
};
const mapStateToProps = (state, ownProps) => ({
collection: selectCollection(ownProps.params.collectionId)(state),
});
export default connect(mapStateToProps)(CollectionPage);
2- 使用 react redux hooks 來獲取組件內部的狀態
const CollectionPage = () => {
const params = useParams();
const paramsId = params.collectionId;
const collection = useSelector((state) =>
selectCollection(params.collectionId)(state)
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/391775.html
標籤：javascript 反应 还原 反应还原 重新选择