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>

以下是它的实际效果： 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中的空值并获取所有元素，即使某些地方存在空索引？

Answer 1

试试这个

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

Answer 2

您可以先尝试合并为空数组。

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

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

并且，您可以在undefined或null

的任何内容上使用此技术

Answer 3

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

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

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

Answer 4

您还可以使用Array#filter删除text道具null的每个条目。

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

地图时如何跳过null？ JSX

4 个答案: