我是 React 初學者，正在嘗試將類轉換為鉤子，需要有關如何安全洗掉 'mapStateToProps ' 而不會被取消定義的建議/幫助。
我有頁面 A.js 和頁面 B.js。
組件 B.js 我在這里發布了完整的代碼，所以很容易理解。目前控制臺日志會給我一個物件陣列。
如果我洗掉 'mapStateToProps ' 并設定 connect(null, null)(ConnectedList)
然后控制臺日志會給我“未定義”。
這是我使用組件 B.js 的 A.js：
<React.Fragment>
<h3>
<Trans i18nKey="home.brokers">Brokers</Trans>
</h3>
<B action="brokers" actionArgs={site.identifier} />
<h3>
<Trans i18nKey="home.cameras">Cameras</Trans>
</h3>
<B action="cameras" actionArgs={site.identifier} />
</React.Fragment>這是我的 B.js，我想轉換并擺脫 'mapStateToProps'
import React, { Component, useEffect, useState } from "react";
import { connect, useDispatch } from "react-redux";
const mapStateToProps = (state) => ({
sites: state.articles.sites,
analysers: state.siteArticles.analysers,
brokers: state.siteArticles.brokers,
cameras: state.siteArticles.cameras,
platforms: state.siteArticles.platforms,
});
function ConnectedList(props) {
console.log("data", props[props.action]);
return <div></div>;
}
const B= connect(mapStateToProps, null)(ConnectedList);
export default B;uj5u.com熱心網友回復：
當我們想要讀取或更改值時，我們將一個組件連接到Redux。
否則，就不需要 Redux。
跳過它
export default Component
uj5u.com熱心網友回復：
我建議你使用useSelectorhook fromreact-redux來解決這個問題。
由于您可以在 useSelector 的回呼中定義任何邏輯，因此您可以輕松地從 props.action 中提取您需要的狀態部分。如果您愿意，您甚至可以將此邏輯提升到一個單獨的選擇器函式中，然后將其添加到您的 useSelector 引數中。
export default function ConnectedList(props) {
const data = useSelector((state) => {
const articles = {
sites: state.articles.sites,
analysers: state.siteArticles.analysers,
brokers: state.siteArticles.brokers,
cameras: state.siteArticles.cameras,
platforms: state.siteArticles.platforms,
};
return articles[props.action];
});
return <div></div>;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/318477.html
標籤：javascript 反应 打字稿 功能 反应钩子