我需要一個組件來檢查狀態並在另一個組件更改后重新渲染（使用 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)
};

所以基本上，用戶將打開過濾器欄，進行更改，關閉過濾器欄，過濾器顯示將隨着更改而更新。