Map 函数中的 Map 不返回 jsx

Question

我有对象像这样

let data = [
    { id: 1, name: "Manikanta", age: 20, Gender: "male"},
    { id: 2, name: "Varsha", age: 85, Gender: "female"},
    { id: 3, name: "Sai", age: 18, Gender: "male"},
    { id: 4, name: "John", age: 24, Gender: "female"},
  ];

let settings = [
 
  {id :1 ,class :"col1",expandable:true},
  {id :2,class :"col2",expandable:true},
  {id :3,class :"col3",expandable:true},
  {id :4,class :"col4",expandable:true}
]

let expandabaledata =[
  {id:1 , content : "I am content 1" },
  {id:2 , content : "I am content 2"},
  {id:3 , content : "I am content 3" },
  {id:4 , content : "I am content 4" }
]

它作为 props 发送到 另一个组件 并且 接收组件 将获取这些 props 并对这些对象执行一些操作以检索数据并显示为一个表格折叠功能。 我附上了代码的一部分，我将在地图内做一个地图并返回一个表格行，我使用 控制台日志 执行 一些检查，我可以在其中获得 if 条件后的所需数据

 {props.data.map((data) => {
          props.settings.map((settings) => {
         if(settings.id === data.id)
          { console.log(settings)
            console.log(data);
            return (
            <tbody key={data.id}>
          
            
              <tr
                className="accordion-toggle collapsed"
                data-toggle="collapse"
                data-target={settings.expandable ? "#".concat(settings.class) : ""}
              >
                {settings.expandable ? (
                  <td className="expand-button"></td>
                ) : (
                  <td></td>
                )}
                <td>{data.id}</td>
                <td>{data.name}</td>
                <td>{data.Gender}</td>
              </tr>
              {props.expanddata.map((exdata) => {
                if (exdata.id === data.id) {
                  return (
                    <tr key={exdata.id} className="hide-table-padding">
                      <td colSpan={parseInt("5")}>
                        <div
                          className="collapse in hdelm p-1"
                          id={settings.class}
                        >
                          <div className="row-3">{exdata.content}</div>
                        </div>
                      </td>
                    </tr>
                  );
                }
              })}
            </tbody>
          );}
        }

我没有任何错误，但是这 2 个映射函数没有返回表格行

Answer 1

您不会从第一个 map 函数返回任何内容。添加return 语句

{props.data.map((data) => {
         return props.settings.map((settings) => {
         if(settings.id === data.id)
          { console.log(settings)
            console.log(data);
            return (
            <tbody key={data.id}>
          
            
              <tr
                className="accordion-toggle collapsed"
                data-toggle="collapse"
                data-target={settings.expandable ? "#".concat(settings.class) : ""}
              >
                {settings.expandable ? (
                  <td className="expand-button"></td>
                ) : (
                  <td></td>
                )}
                <td>{data.id}</td>
                <td>{data.name}</td>
                <td>{data.Gender}</td>
              </tr>
              {props.expanddata.map((exdata) => {
                if (exdata.id === data.id) {
                  return (
                    <tr key={exdata.id} className="hide-table-padding">
                      <td colSpan={parseInt("5")}>
                        <div
                          className="collapse in hdelm p-1"
                          id={settings.class}
                        >
                          <div className="row-3">{exdata.content}</div>
                        </div>
                      </td>
                    </tr>
                  );
                }
              })}
            </tbody>
          );}
        }

或者你可以去掉波浪形的大括号。对于没有任何大括号或 () 的语句函数体，则自动返回该语句结果

{props.data.map((data) =>
          props.settings.map((settings) => {
         if(settings.id === data.id)
          { console.log(settings)
            console.log(data);
            return (
            <tbody key={data.id}>
          
            
              <tr
                className="accordion-toggle collapsed"
                data-toggle="collapse"
                data-target={settings.expandable ? "#".concat(settings.class) : ""}
              >
                {settings.expandable ? (
                  <td className="expand-button"></td>
                ) : (
                  <td></td>
                )}
                <td>{data.id}</td>
                <td>{data.name}</td>
                <td>{data.Gender}</td>
              </tr>
              {props.expanddata.map((exdata) => {
                if (exdata.id === data.id) {
                  return (
                    <tr key={exdata.id} className="hide-table-padding">
                      <td colSpan={parseInt("5")}>
                        <div
                          className="collapse in hdelm p-1"
                          id={settings.class}
                        >
                          <div className="row-3">{exdata.content}</div>
                        </div>
                      </td>
                    </tr>
                  );
                }
              })}
            </tbody>
          );}