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