使用 javascript/react 按内部键过滤答案

【问题标题】：Filter by inner key with javascript/react使用 javascript/react 按内部键过滤
【发布时间】：2021-07-22 07:25:42
【问题描述】：

我正在使用 React 创建一个页面。我有一个显示我所有工作的函数，我想写它只给我匹配一个 id 的工作。我在 jsx 中的代码：

                   <tbody>
                       {jobs && jobs.map(job =>
                           <tr key={job.id}>
                               <td>{job.status}</td>
                               <td>{job.fk_product}</td>
                               <td>{job.fk_order}</td>
                               <td>{job.type}</td>
                               <td>{job.fk_employee}</td>
                               <td style={{ whiteSpace: 'nowrap' }}>
                               </td>
                           </tr>
                       )}
                   </tbody>

我怎样才能重写它以便它通过job.fk_employee 过滤它？例如 if(fk_employee == 5) 只有这样才能映射所有值。（地图不是job.id，而是job.fk_employee）

【问题讨论】：

标签： javascript html reactjs jsx

【解决方案1】：

您可以在映射之前对其进行过滤：

{jobs && jobs.filter(job => job.fk_employee === 5).map(job =>
  <tr key={job.id}>
    <td>{job.status}</td>
    <td>{job.fk_product}</td>
    <td>{job.fk_order}</td>
    <td>{job.type}</td>
    <td>{job.fk_employee}</td>
    <td style={{ whiteSpace: 'nowrap' }}>
    </td>
  </tr>
)}

或在渲染之外

const jobsFiltered = jobs.filter(job => job.fk_employee === 5)
...
{jobsFiltered.map(job => ...)}

【讨论】：

【解决方案2】：

试试

<tbody>
  {jobs && jobs.filter(job => job.fk_employee === 5).map(job =>
  <tr key={job.id}>
    <td>{job.status}</td>
    <td>{job.fk_product}</td>
    <td>{job.fk_order}</td>
    <td>{job.type}</td>
    <td>{job.fk_employee}</td>
    <td style={{ whiteSpace: 'nowrap' }}>
    </td>
  </tr>
  )}
</tbody>

如果jobs应该是一个数组，那么它总是正确的，所以&&语句的第一部分无关紧要，所以你应该检查jobs.length

【讨论】：

【解决方案3】：

您可以在地图之前应用内联过滤器功能。我会在组件中重新定位它，但这取决于你。

     <tbody>
        {jobs && jobs.filter(j => j.fk_employee === 5).map(job =>
           <tr key={job.id}>
             <td>{job.status}</td>
             <td>{job.fk_product}</td>
             <td>{job.fk_order}</td>
             <td>{job.type}</td>
             <td>{job.fk_employee}</td>
             <td style={{ whiteSpace: 'nowrap' }}></td>
            </tr>
          )}
      <tbody>

理想情况下，您应该在组件中应用此过滤器以获得更清晰的代码。

filteredJobs = jobs.filter(job => job.fk_employee === id) ---> eg id = 5

【讨论】：