地图时如何跳过null？JSX

Question

我是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>

以下是它的实际效果:图像在这里

当我在过滤器中选择数组中某处为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)

这里有错误:图片在这里

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

Answer 1

您还可以使用Array#filter删除textprop所在的每个条目null。

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

Answer 2

试试这个

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

Answer 3

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

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

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

而且，您可以在任何可以undefined或null