开发者问题收集

检查 React 组件中的数组是否未定义

2021-12-15
2960

我在 React 组件中有一个渲染匹配名称的代码。但有时当前匹配有空对象,我无法通过此问题。组件代码:

import React from 'react'
import {Link} from 'react-router-dom'

    export const MatchList  = ({ links }) => {
      if (!links.length) {
        return <p className="center">Матчей пока нет</p>
      }
    
      return (
        <table>
          <thead>
          <tr><th><a href="/add">Добавить ссылку</a></th></tr>
          <tr>
            <th>link</th>
            <th>Открыть</th>
          </tr>
          </thead>
    
          <tbody>
          { links.map((link, index) => {
            return (
              link.dataInfo1param1.length > 0 ?
              <tr key={link._id}>
                <td>{link.url}</td>
                <td>
                  Name: { link.dataInfo1param1[0][0]['odddTitle'] } <Link to={`/match/${link._id}`}>Открыть</Link>
                </td>
              </tr>
              :
              <tr key={link._id}>
                <td>{link.url}</td>
                <td>
                  <Link to={`/match/${link._id}`}>Открыть</Link>
                </td>
              </tr>
            )
          }) }
          </tbody>
        </table>
      )
    }

当 link.dataInfo1param1 具有空值时,我总是收到错误

× TypeError:无法读取未定义的属性(读取“长度”)

我如何检查此值不存在或为空?谢谢

3个回答

查看 可选链接

link.dataInfo1param1?.length > 0
tmsbrndz
2021-12-15

您可以使用三元运算符进行此检查,如下所示。

<td>
          Name: { link.dataInfo1param1?link.dataInfo1param1[0][0]['odddTitle']:null } <Link to={`/match/${link._id}`}>Открыть</Link>
        </td>
abhishek sahu
2021-12-15

最简单的解决方案是 link.dataInfo1param1 && link.dataInfo1param1.length > 0

Jerry
2021-12-15