如何从数组中排除一些键答案

【问题标题】：How can I exclude some keys from an array如何从数组中排除一些键
【发布时间】：2019-05-12 20:17:53
【问题描述】：

我正在研究数据表组件的渲染方法，我必须在其中过滤一些标题。

我有这个：

  <TableRow>
    {headers.map(header =>
      checkboxes.map(checkbox =>
          // HERE I NEED TO FILTER IT
        checkbox.value === header.key && checkbox.checked && (
          <TableHeader {...getHeaderProps({ header })}>               
            {header.header}
          </TableHeader>
        ),
      ),
    )}
  </TableRow>

您在上面看到的checkbox.checked 返回true 或false，我需要2 个键来忽略这些条件。条件是否满足并不重要。

我在这里检查checkbox 和header 的值是否相同checkbox.value === header.key，但我需要排除header.key 2 个header.key === device 和header.key === ticketNumber。

所以我需要做类似的事情：

 <TableRow>
    {headers.map(header =>
      checkboxes.map(checkbox =>
          // HERE I NEED TO FILTER IT
        checkbox.value === header.key && checkbox.checked && (ignore header.key === 'device' && header.key === 'ticketNumber' from the conditionals above) (
          <TableHeader {...getHeaderProps({ header })}>               
            {header.header}
          </TableHeader>
        ),
      ),
    )}
  </TableRow>

我的意思是，我在上面的代码中提到的那 2 个标头不应该从 UI 中隐藏。当满足此条件checkbox.value === header.key && checkbox.checked 时，它将隐藏所有带有checkbox.checked === true 的标题，但我需要一个适当的条件/函数来忽略标题键header.key === device 和header.key === ticketNumber。这两个标题应该始终存在于 UI 中。

我用的是lodash，不知道那里能不能用，还有其他选择吗？

【问题讨论】：

所以使用array.filter().map()

标签： javascript reactjs ecmascript-6 lodash

【解决方案1】：

如果我正确理解您的要求，我认为这应该可行：

<TableRow>
  {headers.map(header =>
     (['device', 'ticketNumber'].includes(header.key) || checkboxes.find(checkbox => header.key === checkbox.value).checked) && 
       <TableHeader {...getHeaderProps({ header })}>               
         {header.header}
       </TableHeader>
  )}
</TableRow>

【讨论】：

嗯，.map(checkbox => 是做什么的？如果我按照您在此处设置的方式保留它，它只会在整行标题中显示这两个标题。
我错过了 header.key === checkbox.value 条件 - 更新
它什么也没显示。我不明白为什么.map(checkbox => 因为checkbox 永远不会被使用。
实际上，在最后一次更新中，我得到的是Uncaught TypeError: Cannot read property 'filter' of undefined，在.map(checkbox =>... 部分说checkbox is defined but never used
每个标题是否有一个复选框？

【解决方案2】：

您可以在组件外部创建一个简单的shouldShow() 方法。该方法应包含您的条件，并返回一个布尔值。

由于您有 3 个复选框，并且您只想显示相关列，因此当其中一个被选中时，您应该删除第二张地图，并使用 Array.some() 检查是否至少有一个是 @ 987654324@，和它的value是同一个键的value。

注意：您不需要实际过滤数组，因为 react 会忽略渲染中的 false 值（请参阅 conditional rendering）。它还会忽略undefined 和null。

const shouldShow = ({ key }, checkboxes) =>
  key === 'device' || 
  key === 'ticketNumber' || 
  checkboxes.some(({ checked, value }) => checked && value === key);

<TableRow>
  {headers.map(header =>
    shouldShow(header, checkboxes) && (
      <TableHeader {...getHeaderProps({ header })}>               
        {header.header}
      </TableHeader>
    ),
  )}
</TableRow>

更好的解决方案是使用Array.reduce() 创建一组已检查的键，然后在渲染列时检查键是否存在于其中：

 // in the render method
const shouldRenderSet = checkboxes.reduce((r, { checked, value }) =>
  checked ? r.add(value) : r
, new Set(['device', 'ticketNumber'])) 

<TableRow>
  {headers.map(header =>
    shouldRenderSet.has(header.key) && (
      <TableHeader {...getHeaderProps({ header })}>               
        {header.header}
      </TableHeader>
    ),
  )}
</TableRow>

【讨论】：