错误:渲染的钩子比上一次渲染时多.如何修复

Question

const entries = type == 'admin' ? AdminMenu : CitizenMenu;
const [finalEntries, setFinalEntries] = useState([]);
useEffect(() => {
entries?.top?.map((element, index) => {
if (element.permission === 'all')
setFinalEntries([...finalEntries, element])
else if (user?.permissions?.includes(element?.permission))
setFinalEntries([...finalEntries, element])
});
}, [entries]);

return (
<div className="leftMenu">
<MB flex dc>
{finalEntries?.map((item, index) => menuButton(item, index))}
</MB>
</div>
)

我有一个看起来像这样的组件(非常简化的版本(：

嗨，伙计们，如何修复这个错误？

Answer 1

您正在map中更新状态。所以你遇到了这种情况。

如果entries.top有100个条目，则调用状态更新100次，这将导致100次重新渲染。

这太糟糕了。

useEffect(() => {
entries?.top?.map((element, index) => {
if (element.permission === 'all')
setFinalEntries([...finalEntries, element])
else if (user?.permissions?.includes(element?.permission))
setFinalEntries([...finalEntries, element])
});
}, [entries]);

我认为在您的情况下可以使用useMemo而不是使用状态变量finalEntries。

请参阅下面的代码片段。

const entries = type == 'admin' ? AdminMenu : CitizenMenu;
const finalEntries = useMemo(() => {
return entries?.top?.map(element => element.permission === 'all' || user?.permissions?.includes(element?.permission));
}, [entries?.top, user?.permissions]);