javascript - 我需要一个组件来检查状态并在另一个组件更改后重新渲染(使用 React Hooks)
问题描述
我不确定我要问的甚至是可能的,但是就这样。我有一个包含多个组件的 Web 应用程序,其中两个是过滤器栏和过滤器显示。我们必须对过滤器栏进行一些重大重构,并将其从类组件更改为带有钩子的功能组件,并且我必须包含一些 forceUpdate 代码以使过滤器栏实际显示选择的过滤器值(即单击过滤器过滤器栏上的选择会更改仪表板显示,但不会更改过滤器栏本身,除非您关闭并再次打开它)。过滤器显示组件是一个简单的扩展面板,默认情况下它是打开的并显示当前处于活动状态的过滤器。以前,它会在过滤栏中的值更改时自动更新,但由于我重写了过滤栏,只有当我关闭并重新打开扩展面板时它才会更新。这是过滤器显示中的一些代码:
const FilterDisplay = props => {
const [expanded, setExpanded] = useState("panel1");
const selectionFilters = useSelector(state => state.fetchFilter);
const availableFilters = useSelector(state => state.fetchFilterSelect);
const viz = useSelector(state => state.fetchDashboard);
const handleChange = panel => (event, isExpanded) => {
setExpanded(isExpanded ? panel : false);
};
return (
<div className={classes.rootPanel}>
<MuiExpansionPanel
expanded={expanded === "panel1"}
onChange={handleChange("panel1")}
>
<MuiExpansionPanelSummary
expandIcon={<ExpandMoreIcon edge="start" />}
>
<Typography variant="subtitle" className={classes.headingPanel}>
Show Applied Filters
</Typography>
</MuiExpansionPanelSummary>
{Object.keys(selectionFilters)
.filter(key => {
return (
availableFilters[key] !== undefined &&
availableFilters[key].length > 0 &&
selectionFilters[key].length !==
availableFilters[key].length
);
})
.map(title => {
return (
<MuiExpansionPanelDetails
key={title}
className={classes.ExpansionPanelD}
>
<Typography className={classes.filterTitle} variant="p">
{title}
{" : "}
</Typography>
{selectionFilters[title].length < 10 ? (
selectionFilters[title].map(value => {
return (
<span key={value} className={classes.filterValue}>
<Chip
label={value}//this is the value that needs to change when the filterbar changes
/>
</span>
);
})
) : (
<Typography variant="p" className={classes.selection}>
{selectionFilters[title].length} selected
</Typography>
)}
</MuiExpansionPanelDetails>
);
})}
</MuiExpansionPanel>
</div>
);
};
export default FilterDisplay;
我会在 forceUpdate 中编码,但我无法弄清楚如何在不导致无限重新渲染的情况下执行此操作(与 Filterbar 不同,当用户在过滤器栏上特别执行某些操作时我希望它改变,我需要过滤器显示更新,而不是当某人打开或关闭过滤器显示时,而是当他们更改过滤器栏上的某些内容时)。谁能给我一些想法?蒂亚!
解决方案
您似乎正在使用useSelector()
from react-redux 来获取您的 selectionFilters。从文档:
当函数组件渲染时,将调用提供的选择器函数,并从 useSelector() 钩子返回其结果。[...] useSelector() 仅在选择器结果与上一个结果不同时才强制重新渲染。从 v7.1.0-alpha.5 开始,默认比较是严格的 === 参考比较。
useSelector()
接收作为第二个参数的回调,您可以在其中自己执行比较。在文档中,他们推荐使用他们在 react-redux 中导出的 shallowEqual:
import { shallowEqual, useSelector } from 'react-redux'
// ...
const selectionFilters = useSelector(state => state.fetchFilter, shallowEqual);
您当然可以自己提供比较功能,这不起作用。
推荐阅读
- ruby-on-rails - 在 rails 过滤器中给出条件
- git - 你如何运行 git 连接/凭据检查?
- python - 寻找 pyMX 教程
- python - 为 CLI 工具组合 while 循环
- android - 将 Flutter with Fabric 分发给 beta 测试人员
- git - 如何解决 Flutter 上的“无法在 PATH 中找到 git”?
- email - Cpanel Yandex MX 错误
- python - selenium.common.exceptions.ElementNotVisibleException:消息:通过python在ubuntu无头浏览器中调用send_keys时元素不可见
- r - 具有总频率和级别的拆分 R 条形图
- scala - 如何使用函数式编程风格在 Scala 中管理数据库连接?