我有一个MarketOverview
组件,用于渲染一堆加密货币交易对市场。初始化时,我希望它默认呈现BTC/USD
市场,这是通过useEffect()
完成的。问题是defaultMarket
在每个渲染上都被调用。此外,defaultMarket
依赖于tickers
道具,因此如果我将其包装在useMemo()
中,则eslint react-hooks插件会自动填充tickers
作为依赖项。
没有useMemo()
:
const defaultMarket = tickers.find((ticker) => {
return ticker.market_id === "BTC-USD";
});
使用useMemo()
:
const defaultMarket = useMemo(
() =>
tickers.find((ticker) => {
return ticker.market_id === "BTC-USD";
}),
[tickers]
);
整个组件:
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>
);
});
答案 0 :(得分:1)
为什么,如果defaultMarket
更新,就永远不会重新计算tickers
。
但是,如果您确实愿意,可以为该行添加eslint禁用,并使用一个空的依赖项数组,以便该挂钩仅在组件安装时运行一次。
const defaultMarket = useMemo(
() =>
tickers.find((ticker) => {
return ticker.market_id === "BTC-USD";
}),
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
);