arrays - React 迭代嵌套数组给出错误无法读取 null 的属性(读取“值”)
问题描述
尝试映射嵌套数组时出现错误:数据结构如下:
错误:无法读取 null 的属性(读取“值”)
export const testData = [
{
"date": [
"2016-09-0912:00:00",
"2015-09-0913:10:00"
],
"title": [
{
"name": 'Name 1',
"description": [
{
"value": 7898
},
{
"value": 7898
}
]
},
{
"name": 'Name 2',
"description": [
{
"value": 3244
},
{
"value": 4343
}
]
},
{
"name": 'Name 3',
"description": [
null,
null
]
}
]
}
]
我努力了:
<div style={{ color: 'white' }}>
Hello
{testData.map(inner => {
return (
<p style={{color: 'white'}}>{inner.title.map(inside => {
return (
inside.description.map(point => {
return (
point.value
)
})
)
})}</p>
)
})}
</div>
所以有点迷茫?
解决方案
这是因为该对象的值为 null Name 3
。一个快速的解决方法是使用可选链接。
前任
<div style={{ color: 'white' }}>
Hello
{testData.map(inner => {
return (
<p style={{color: 'white'}}>{inner.title.map(inside => {
return (
inside.description.map(point => {
return (
point?.value // here
)
})
)
})}</p>
)
})}
</div>
推荐阅读
- java - 为什么在我为 JTextArea 设置插入符号位置后,文本会发生变化?
- regex - 谷歌分析转换目标的正则表达式
- c# - .NET 核心 3.1 的 GraphQL
- aws-cdk - 仅在状态机执行期间才知道的 StepFunctions 任务的 CDK 构造
- docker - 在 docker 中添加自定义 seccomp 配置文件
- python - 以下 python 代码给出了不适当的输出
- reactjs - 如何将此对象放在数组中
- java - 只有 1 个演员的 Akka 并发
- javascript - 运行“npm start”时出错:“next”未被识别为内部或外部命令,
- c++ - std::chrono::from_stream gcc 可用性,在 gcc 10.1.0 中不可用