映射函数React中的条件表单元格

Question

我有一个映射到表内的数组，我想检查对象属性“userName”是否与标题相同，以便我知道该值的放置位置，否则应显示为“0”。

下面是映射完成后的表格：

{report.data.map(obj => (
                  <React.Fragment>
                    <TableCell>{obj.userName === users[0] ? obj.workedHours : "0"}</TableCell>
                    <TableCell>{obj.userName === users[1] ? obj.workedHours : "0"}</TableCell>
                    <TableCell>{obj.userName === users[2] ? obj.workedHours : "0"}</TableCell>
                  </React.Fragment>
                ))}

在映射函数中，users 就是用户喜欢的数组

users = ["User 1", "User 2", "User 3"]

而report.data 是每个项目的对象数组：

[{userName: "User 1", rate: 5, clientName: "client A", workedHours: 8},
 {userName: "User 2", rate: 3, clientName: "client B", workedHours: 5}]

表格的结束方式如下：

你能帮我在它存在的地方显示每个用户的价值，否则显示“0”吗？

感谢您的宝贵时间

Answer 1

我已经创建了一个反应示例。

我还通过迭代标题列的用户来使其更加动态。

如果用户一直在多个客户端上工作，数据会是什么样子？

const users = ["User 1", "User 2", "User 3"];

const projects = [
  {
    projectName: "project 1", 
    data: [
      {userName: "User 1", rate: 5, clientName: "client A", workedHours: 8},  
      {userName: "User 2", rate: 3, clientName: "client B", workedHours: 5}
    ]
  }, 
  {
    projectName: "project 2", 
    data: [
      {userName: "User 3", rate: 6, clientName: "client A", workedHours: 5}
    ]
  }
]

ReactDOM.render(
  <table>

    <tr>
      <td>Project:</td>
      {users.map(user => (
        <td><span>{user}</span></td>
      ))}
    </tr>

    {projects.map(project => (
      <tr>
        <td><span>{project.projectName}</span></td>

         {users.map(user => {
          
          // Filter for only users that has worked on the project
          const usersOnProject = project.data.filter(obj => obj.userName === user)
          
          // If there is users on the project, iterate them
          if(usersOnProject.length) {
            return (
              <td>
                {usersOnProject.map(obj => obj.userName === user && obj.workedHours)}
              </td>
            )
          }
          
          // Else if no users on the project, return 0
          return (
            <td>0</td>
          )
        })}
      </tr>
    ))}

  </table>,
  document.getElementById('root')
);

table {
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: 14px;
}
table td + td, table th + th {
  text-align: center;
  border-collapse:
}

span {
  color: red;
}

td, th {
  padding: 3px;
  border-bottom: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>