我需要一个组件来检查状态并在另一个组件更改后重新渲染（使用 React Hooks）

Question

我不确定我要问的是什至可能，但这里是。 我有一个包含多个组件的 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 中编码，但我无法弄清楚如何在不导致无限重新渲染的情况下进行（与过滤器栏不同，当用户在过滤器栏上专门执行某些操作时，我希望它更改，我需要过滤器显示更新，不是当有人打开或关闭过滤器显示时，而是当他们更改过滤器栏上的某些内容时）。 谁能给我一些想法？ 蒂亚！

Answer 1

似乎您正在使用 react-redux 中的useSelector()来获取您的选择useSelector() 。 从文档：

当函数组件呈现时，提供的选择器函数将被调用，其结果将从 useSelector() 钩子返回。 [...] useSelector() 仅在选择器结果与上次结果不同时才强制重新渲染。 从 v7.1.0-alpha.5 开始，默认比较是严格的 === 引用比较。

useSelector()接收作为第二个参数的回调，您可以在其中自己执行比较。 在文档中，他们推荐使用他们在 react-redux 中导出的shallowEqual：

import { shallowEqual, useSelector } from 'react-redux'
// ...

const selectionFilters = useSelector(state => state.fetchFilter, shallowEqual);

您当然可以自己提供比较功能，但这不起作用。

Answer 2

好的，我找到了一个解决方案，它不会在过滤器栏更改时立即重新渲染，但是当过滤器栏关闭时它确实会导致重新渲染。 基本上，就在 handleChange 函数之后，我添加了这个小代码块：

if (props.drawerOpen) {
console.log(props.selectionFilters)
};

所以基本上，用户将打开过滤器栏，进行更改，关闭过滤器栏，过滤器显示将随着更改而更新。