Map函数中的Map不返回jsx

问题描述

我有这样的对象

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

let settings = [
 
  {id :1,class :"col1",expandable:true},{id :2,class :"col2",{id :3,class :"col3",{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" }
]

将其作为道具发送到另一个组件，而接收组件将采取这些道具并对对象进行一些操作以检索数据并显示为表格折叠功能。 我附加了一部分代码，将在地图内绘制地图并返回表行，并使用控制台日志进行了一些检查，在此我可以获得 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>
          );}
        }

我没有任何错误，但是那两个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>
          );}