映射时如何跳过null？ JSX答案

【问题标题】：How to skip null while map? JSX映射时如何跳过null？ JSX
【发布时间】：2018-01-04 14:54:48
【问题描述】：

我是 ReactJs/Redux 和 JSX 的新手。我有一个动态表，其中包含动态信息。

我的地图有问题。我有 2 个级别的地图：

<tbody>
  {
    data.map(row => (
      <tr key={`${row.type}`}>
        <td>
          <h5>{row.type}</h5>
        </td>
        <td>
          {
            row.text.map((name, indexText) => (
               <span key={row.text[indexText]} className="margin-right-10">
                 <Link
                   key={name}
                   role="button"
                   onClick={ () => this.getData(
                   this.state.le_id,
                   row.text[indexText][1],
                   row.type,
                   this.state.year,
                  )}>
                   {row.text[indexText][0]}
                 </Link>
               </span >
            ))
          }
        </td>
          <td>
              <Link className="btn btn-info btn-sm"
                    to={`/company/insurances/all-providers/${row.type}/${this.state.le_id}`}
              >
              {locales('create')}
              </Link>
          </td>
       </tr>
    ))
  }
</tbody>

以下是它在运行中的完整图片： image here

当我在过滤器中选择数组中存在 null 的其他条件时，它会停止并显示错误：

list.js?6d8a:153 Uncaught (in promise) TypeError: Cannot read property 'map' of null
    at eval (eval at <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:8972:1), <anonymous>:238:35)
    at Array.map (native)
    at ListsAccounting.render (eval at <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:8972:1), <anonymous>:222:26)
    at eval (eval at <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:796:21)
    at measureLifeCyclePerf (eval at <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:75:12)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (eval at <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:795:25)
    at ReactCompositeComponentWrapper._renderValidatedComponent (eval at <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:822:32)
    at ReactCompositeComponentWrapper._updateRenderedComponent (eval at <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:746:36)
    at ReactCompositeComponentWrapper._performComponentUpdate (eval at <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:724:10)
    at ReactCompositeComponentWrapper.updateComponent (eval at <anonymous> (http://localhost:3000/main-7a3d3e8ea9d6afcdba75.min.js:16034:1), <anonymous>:645:12)

这里是错误的操作：image here

如何在映射时跳过 JSX 中的空值并获取所有元素，即使某些地方存在空索引？

【问题讨论】：

React can't access props in child component render的可能重复

标签： javascript reactjs react-redux ternary-operator jsx

【解决方案1】：

您可以在 ES11 中使用可选链：

row.text?.map((name, indexText)

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

【讨论】：

【解决方案2】：

您可以先尝试合并到一个空数组。

(row.text || []).map()

这意味着，您只需稍微修改现有代码。

而且，您可以在 undefined 或 null 的任何对象上使用此技术

【讨论】：

这很好。使用钩子时出现错误。在反应钩子中，我在 useEffect 方法中调用 fetch 来获取数据。同时 DOM 得到渲染并通过未定义的错误。但现在我解决了提到的这个问题。谢谢

【解决方案3】：

您还可以使用Array#filter 删除每个text 属性为null 的条目。

data.filter(v => v.text !== null).map((name, textIndex) => { ...

【讨论】：

简写为data.filter(v => v)。
@MuratK。在这种情况下，我们不能使用这个速记，因为它会省略 text 的条目，例如一个空字符串。
我之前尝试过询问stackoverflow，但在我的情况下它不起作用。这对我有用 row.text && row.text.map((name, indexText) ...

【解决方案4】：

试试这个

row.text && row.text.map((name, indexText) ...

【讨论】：