组件定义缺少显示名称React.js

Question

eslint在该特定行component: (props) => <Category {...props} category={menu} />上引发错误

如何修复此

const getRoutesView = () =>
useMemo(() => {
const list = [];
menuList.forEach((menu) => {
list.push({
path: `/${menu.slug}`,
component: (props) => <Category {...props} category={menu} />,
});
});
return (
<Switch>
{list.map((item, key) => (
<Route
exact
key={key}
path={item.path}
component={item.component}
/>
))}
<Route component={NotFound} />
</Switch>
);
}, [menuList]);

Answer 1

您可以像下面这样使用，无需创建一个新数组，然后从中迭代。

const getRoutesView = () => useMemo(() => {
const callback = (menu, key) => (
<Route
exact
key={key}
path={`/${menu.slug}`}
component={(props) => <Category {...props} category={menu} />}
/>
);
return (
<Switch>
{menuList.map(callback)}
<Route component={NotFound} />
</Switch>
);
}, [menuList]);