reactjs - useSelector 和映射函数 React Redux
问题描述
我想遍历一个数组,但我不确定是否可以在 useSelector redux 钩子中执行此操作,因为它没有给我想要的结果。你们中有人实现过吗?还是我完全错了?
索引.jsx
const test = useSelector(state => state.data.map(e => e.details));
数据.js
data: [
{
name: 'long neck',
details: {
total: 1,
height: "3ft",
weight: "34 lbs",
}
},
{
name: 'fun fact',
details: {
total: 30,
height: '1ft',
weight: '16 lbs',
}
},
],
解决方案
我认为你不应该那样做。
因为每次调用 useSelector 时都会返回一个新数组。
我认为正确的方法是返回实际数据,然后像这样在外面进行过滤。
const data = useSelector(state => state.data);
const details = calculateDetails() => {
//do all your filtering, mapping, slicing
return data.map(e => e.details));
};
我这样做的原因是避免在没有任何变化时进行渲染。
你不应该从 useSelector 返回新对象,除非你使用第二个参数,它是一个相等检查函数。
推荐阅读
- javascript - 多个 if else 条件的替代方法
- angular - NgModule 提供者不在 Angular 中提供服务
- reactjs - 罕见的文档使用 firebase、react 和 redux-saga 读取错误
- angular - 我是否总是在 Angular 组件 HTML 模板中为元素的属性值使用引号?
- javascript - 如何使用formgroups的formarray进行角度的mat-select
- python - Python 类属性和 PyCharm 调试器
- reactjs - ReactJS/Redux - 根组件页面在任何页面刷新时呈现
- c# - 迈瑞BC-5150 HL7通讯端口号和ip地址在哪里设置
- python - 如何修复错误:werkzeug.routing.BuildError:无法使用值 ['id'] 为端点“删除”构建 url。你的意思是“索引”吗?
- javascript - 如何通过纯javascript单击HTML中的单选按钮显示不同的表单