Map 在 Map function 内不返回 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" }
]

它作为道具发送到另一个组件，接收组件将获取这些道具并对这些对象执行一些操作以检索数据并显示为具有折叠功能的表格。 我附上了代码的一部分，我将在 map 内执行 map 并返回一个表格行，我对控制台日志进行了一些检查，在 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 函数没有返回表行

Answer 1

你不会从第一个 map function 返回任何东西。 添加一个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>
          );}
        }

或者您可以移除波浪形支架。 对于一个语句 function 主体没有任何大括号或() ，然后自动返回该语句结果

{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>
          );}