React中遍历多个数组时如何正确返回并渲染JSX？

问题场景 #

我已实现遍历数组，通过console.log输出符合条件的job对象，代码如下：

import React from 'react';

const MyApplications = ({ currentUser, jobs, jobApplications }) => {
   
 const jobAppsFromCurrentUser = jobApplications.filter(jobApp => jobApp.musician_id === currentUser.id)

  return (
    <div>
        <div>
          {
             jobs.filter(job => {
              jobAppsFromCurrentUser.map(jobApp => {
                if (jobApp.job_id === job.id) {
                  console.log(job)
                }
              })
            })
          }
        </div>
    </div>
  )
}

export default MyApplications

但当我尝试将符合条件的job渲染为JSX元素时，以下写法无法返回任何内容：

<div>
    {
       jobs.filter(job => {
        jobAppsFromCurrentUser.map(jobApp => {
          if (jobApp.job_id === job.id) {
            return (
              <div>
                 <h1>{job.title}</h1>
              </div>
            )
          }
        })
      })
    }
</div>

解决方案 #

import React from 'react';

const MyApplications = ({ currentUser, jobs, jobApplications }) => {
 
  const jobAppsFromCurrentUser = jobApplications.filter(jobApp => jobApp.musician_id === currentUser.id)

  const includesID = (id) => {
    const onFilter = jobAppsFromCurrentUser.filter((jobApp) => jobApp.job_id == id);

    return onFilter.length > 0 ? true : false;
  };

  return (
    <div>
        <div>
             {jobs.map((job) => {
              if (includesID(job.id)) {
                return (
                  <div key={job.id}>
                    <h1>{job.title}</h1>
                  </div>
                );
              }
            })}
        </div>
    </div>
  )
}

export default MyApplications

问题原因说明 #

之前的写法存在两个核心问题：

1. jobs.filter的回调函数未返回筛选条件，导致筛选后的数组为空，无法触发后续渲染；
2. 内层jobAppsFromCurrentUser.map的返回值未被外层捕获，即便找到匹配项也无法传递到渲染逻辑中。

解决方案通过封装includesID函数判断job是否在用户的申请列表中，再遍历jobs数组直接返回符合条件的JSX元素，同时添加了React列表渲染必需的key属性，确保渲染逻辑正确且符合规范。

内容的提问来源于stack exchange，提问作者samwstout