如何在使用map时跳过null？JSX

Question

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

我的问题出在map上。我有两个层级的map：

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

这是它实际运行时的完整图示： 图片这里 当我在筛选器中选择其他条件，其中数组中有空值时，它会停止并显示错误：

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映射时跳过null值，并在某些位置存在空索引的情况下获取所有元素？

​

- Nikita Afanasiev

---

可能是React无法在子组件渲染中访问props的重复问题。 - Shubham Khatri

Answer 1

你还可以使用 Array#filter 过滤掉所有 text 属性值为 null 的条目。

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

- kind user

---

简写形式为 data.filter(v => v)。 - Murat Karagöz

@MuratK。在这种情况下，我们不能使用这种速记法，因为它会省略text为空字符串的条目。 - kind user

我之前尝试在stackoverflow上询问过，但在我的情况下它并没有起作用。这对我有用。 row.text && row.text.map((name, indexText) ... - Nikita Afanasiev

Answer 2

试试这个

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

- qiAlex

Answer 3

你可以先尝试将其合并到一个空数组中。

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

这意味着，您只需要稍微修改现有的代码即可。而且，您可以在任何可以是"undefined"或"null"的东西上使用这种技术。

- Callum Linington

---

这非常好。在使用钩子时我遇到了错误。在React钩子中，我在useEffect方法中调用fetch来获取数据。与此同时，DOM被渲染并抛出未定义的错误。但现在我已经通过提到的方法解决了这个问题。谢谢。 - Waqas

Answer 4

你可以在 ES11 中使用可选链（Optional Chaining）：

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

参考资料: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining

- Tuong Huynh