Reactjs 希望在第一次渲染时设置一次状态，而不会在进一步更新时导致不必要的重新渲染

我有一个

MarketOverview

组件，用于呈现一系列加密货币交易对市场。在初始化时，我希望它默认呈现

BTC/USD

市场，这是我通过

useffect（）

完成的。问题是每次渲染时都会调用

defaultMarket

。此外，

defaultMarket

依赖于

tickers

属性，因此如果我将其包装在

usemo（）

中，那么eslint react hooks插件会自动填充

tickers

，作为一个依赖项

不带

useMoom（）

：

使用

usemo（）

：

整个组件：

export const MarketOverview = memo(({ tickers }: TProps) => {

  // Set default market on initialisation to BTC/USD
  const defaultMarket = tickers.find((ticker) => {
    return ticker.market_id === "BTC-USD";
  });

  const [selectedMarket, setSelectedMarket] = useState<ITicker | undefined>(
    undefined
  );

  useEffect(() => {
    setSelectedMarket(defaultMarket);
  }, [defaultMarket]);

  // Select market
  const selectMarket = (market: ITicker) => {
    history.push(`${PUBLIC_URL}/markets/${market.market_id}`);
    setSelectedMarket(market);
  };
  return (
    <div className="market-overview-container">
      <MarketSelector
        tickers={tickers}
        selectMarket={selectMarket}
        selectedMarket={selectedMarket}
      />
      {selectedMarket && <MarketStats selectedMarket={selectedMarket} />}
    </div>
  );
});

export const MarketOverview=memo（{tickers}:TProps）=>{
//将初始化时的默认市场设置为BTC/USD
const defaultMarket=tickers.find（（ticker）=>{
返回ticker.market_id==“BTC-USD”；
});
常量[selectedMarket，setSelectedMarket]=useState(
未定义
);
useffect（（）=>{
设置选定市场（默认市场）；
}，[defaultMarket]）；
//选择市场
const selectMarket=（market:ITicker）=>{
history.push（`PUBLIC\u URL}/markets/${market.market\u id}'）；
设置选定市场（市场）；
};
返回(
{selectedMarket&&}
);
});

为什么，如果

股票

有更新，您就永远不会重新计算

defaultMarket

但是，如果您确实想这样做，您可以为该行添加一个eslint disable，并使用一个空的依赖项数组，以便钩子只在组件挂载时运行一次

const defaultMarket = useMemo(
  () =>
    tickers.find((ticker) => {
      return ticker.market_id === "BTC-USD";
    }),
  // eslint-disable-next-line react-hooks/exhaustive-deps
  []
);

export const MarketOverview = memo(({ tickers }: TProps) => {

  // Set default market on initialisation to BTC/USD
  const defaultMarket = tickers.find((ticker) => {
    return ticker.market_id === "BTC-USD";
  });

  const [selectedMarket, setSelectedMarket] = useState<ITicker | undefined>(
    undefined
  );

  useEffect(() => {
    setSelectedMarket(defaultMarket);
  }, [defaultMarket]);

  // Select market
  const selectMarket = (market: ITicker) => {
    history.push(`${PUBLIC_URL}/markets/${market.market_id}`);
    setSelectedMarket(market);
  };
  return (
    <div className="market-overview-container">
      <MarketSelector
        tickers={tickers}
        selectMarket={selectMarket}
        selectedMarket={selectedMarket}
      />
      {selectedMarket && <MarketStats selectedMarket={selectedMarket} />}
    </div>
  );
});

const defaultMarket = useMemo(
  () =>
    tickers.find((ticker) => {
      return ticker.market_id === "BTC-USD";
    }),
  // eslint-disable-next-line react-hooks/exhaustive-deps
  []
);