组件定义缺少显示名称 - 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]);