删除mapStateToProps将返回undefined

Question

我是React初学者，试图将类转换为钩子，需要关于如何安全地删除'mapStateToProps '而不未定义的建议/帮助。

页面A.js和研究。

组件B.js我在这里张贴了整个代码，所以它很容易理解。此时控制台日志将给我一个对象数组。

如果我删除'mapStateToProps '并设置connect(null, null)(ConnectedList)

那么控制台日志将给我'undefined'。

这是我的A.js，我使用组件B.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;

Answer 1

我建议您使用react-redux的useSelector钩子来解决这个问题。

因为你可以在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>;
}

Answer 2

我们将组件连接到Redux当我们想要读取或修改时一个值。

否则,有不需要回来的。

直接跳过

export default Component