组件未渲染（React JS/Material UI）答案

【问题标题】：Component Not Rendering (ReactJS/MaterialUI)组件未渲染（React JS/Material UI）
【发布时间】：2020-05-21 00:55:17
【问题描述】：

在我的 div 中，我有一个函数，它根据对象中存在的内容呈现组件。但是，即使cat.comp 返回了实际的功能组件，它也不会被渲染。

这是我的渲染函数：

{cardsInGrid.map((card) => {
            sideBarCategories.map((cat) => {
              if (card.id === cat.id) {
                const Component = cat.comp;
                return <Component key={card.id} />;
              }
            });
          })}

【问题讨论】：

返回内部地图或从其父箭头函数中删除括号

标签： javascript reactjs

【解决方案1】：

第一个 map 没有返回任何内容。你需要return元素数组：

          {cardsInGrid.map((card) => {
            return sideBarCategories.map((cat) => {
              if (card.id === cat.id) {
                const Component = cat.comp;
                return <Component key={card.id} />;
              }
            });
          })}

但是，这将产生一个二维数组，因此您需要将其展平。一种方法是将其移出组件树并创建一维数组。例如，类似于以下内容的内容：

const elements = [];

cardsInGrid.forEach(card => {
  sideBarCategories.forEach(cat => {
    const Component = cat.comp;
    elements.push(<Component key={card.id + cat.id} />);
  });
});

return <>{elements}</>;

经过进一步讨论，听起来您只有一个组件，并且您希望找到该特定类别并呈现它。在这种情况下，我建议使用find（或等效逻辑）。例如：

{cardsInGrid.map(card => {
  const Component = sideBarCategories.find(cat => cat.id === card.id).comp;
  return <Component key={card.id} />;
})}

【讨论】：

我对代码没有那么详细，所以很好：）我不知道 OP 想要什么，但我赞成你的答案。
@skovy 我有一个带有 id 和相应组件的地图，我想做的是获取 cardsInGrid 数组中列出的 id 并找到列出的相应组件相同编号为sideBarCategories。最有效的方法是什么？
@NathanealVarghese 我更新了答案，我建议使用find。这是您要解决的问题吗？
@skovy 完美运行！非常感谢，我学习了.find函数！

【解决方案2】：

您在第一个 map 方法中缺少 return。你应该添加它：

{
  cardsInGrid.map((card) => {
    return sideBarCategories.map((cat) => {
      if (card.id === cat.id) {
        const Component = cat.comp;
        return <Component key={card.id} />;
      }
    });
  });
}

或者你可以使用隐式返回：

{
  cardsInGrid.map((card) =>
    sideBarCategories.map((cat) => {
      if (card.id === cat.id) {
        const Component = cat.comp;
        return <Component key={card.id} />;
      }
    })
  );
}

【讨论】：

谢谢你。前面的回报奏效了。你有什么方法可以简化函数本身吗？
嗯，这对我来说似乎很简单 :) 如果结果是你想要的，那就继续吧。另外，您可以查看@skovy 的答案。