javascript - 在react js中根据图像映射数据

Question

我正在尝试将 API 数据循环到图像中的表中，但出现错误。
我希望按日期的数据主模块名称必须作为表头出现，并且相应的子模块将位于主模块下，如图所示。
备注 :主模块将有多个如图所示的子模块。
最后一个表格标题将是自定义的。它将按日期显示所有自定义模块名称。

<div style={{ display: "flex" }}>
      {predefined.map((personData, index) => {          ///mapping mainmodules
        return (
          <thead>
            <tr>
              <th style={styles.th}>{personData.mainModule}</th>
            </tr>
            {personData.submodule
              .filter((e) => e.completed == true)            ///maping submodules
              .map((subModule) => {
                return (
                  <>
                    <tr>
                      <td style={styles.td}>{subModule.subModuleName}</td>
                    </tr>
                  </>
                );
              })}
          </thead>
        );
      })}

      <thead>
        <tr>
          <th style={styles.th}>custum</th>
        </tr>

        {custom.map((personData, index) => {
          return (
            <tr>
              <td style={styles.td}>{personData.name}</td>{" "}
            </tr>
          );
        })}
      </thead>

我创建了一个包含我尝试过的完整代码的代码沙箱。
https://codesandbox.io/s/blissful-http-fdl0f?file=/src/App.js
enter image description here

Answer 1

您可以尝试使用filter像这样。不确定这是否是您要找的。

{predefined.filter(item => item.module === 'mainmodule1').map((module, index) => {
    return (
        <td key={index}></td>
    )
})}

{predefined.filter(item => item.module === 'mainmodule2').map((module, index) => {
    return (
        <td key={index}></td>
    )
})}