我在 React 組件中有一個呈現匹配名稱的代碼。但有時當前比賽有空物件，我無法通過這個問題。組件代碼：
從 '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 有一個空值時，我總是得到一個錯誤
× 型別錯誤：無法讀取未定義的屬性（讀取“長度”）
如何檢查此值不存在或為空？謝謝
uj5u.com熱心網友回復：
查看可選鏈接。
link.dataInfo1param1?.length > 0
uj5u.com熱心網友回復：
您可以使用三元運算子進行此檢查，如下所示。
<td>
Name: { link.dataInfo1param1?link.dataInfo1param1[0][0]['odddTitle']:null } <Link to={`/match/${link._id}`}>Открыть</Link>
</td>
uj5u.com熱心網友回復：
最簡單的解決方案是 link.dataInfo1param1 && link.dataInfo1param1.length > 0
uj5u.com熱心網友回復：
在映射您的串列之前，您可以檢查它是否為空，如下所示：
{
links && links.map(link, index) => {//your logic}
}
uj5u.com熱心網友回復：
Array.isArray(link.dataInfo1param1) && link.dataInfo1param1.length > 0
uj5u.com熱心網友回復：
在 JS 中有一個運算子可以在這些情況下使用，可選鏈接
像這樣使用它：
link.dataInfo1param1?.length > 0
uj5u.com熱心網友回復：
有很多方法可以驗證是否link.dataInfo1param1為undefined。我通常使用的方式是：
三重運算子，在你的情況下是：
link.dataInfo1param1 !== undefined && link.dataInfo1param1.length > 0 && ...typeof操作員：typeof link.dataInfo1param1 != 'undefined' && link.dataInfo1param1.length > 0 && ...簡單檢查：
link.dataInfo1param1 && link.dataInfo1param1.length > 0 && ...可選鏈運算子：
link.dataInfo1param1?.length > 0 && ...
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/381393.html
標籤：javascript 反应