从 JSON 访问数据返回“未定义”
Posted
技术标签:
【中文标题】从 JSON 访问数据返回“未定义”【英文标题】:Accessing data from JSON returns "undefined" 【发布时间】:2018-09-02 22:26:17 【问题描述】:我正在 React with Recharts 中使用来自静态 json 文件的数据进行数据可视化。当用户单击条形图时,该值将传递给应用程序,置于状态 (state.dayview[]) 中,我想将该特定图表区域的特定数据呈现给浏览器。因此,我想通过将完整 json 中的日期与在图表上单击的日期匹配来有条件地呈现 DayView 组件。
我有状态的 json (state.data),我可以记录状态没有问题。但是,当我尝试访问 json 对象中的特定数据(例如:this.state.data.date)时,该值返回“未定义”。 下面我有一个可以正常工作的 map 方法,但是 filter 方法显然失败了,因为没有检索到“日期”键。 我错过了什么??
class App extends React.Component
constructor(props)
super(props)
this.state =
data,
dayview: []
render()
return (
<main>
<div>
<StackedBarChart
data=this.state.data
handleBarClick=this.handleBarClick />
</div>
<section>
this.state.dayview && this.state.data.filter(x =>
this.state.data.date === this.state.dayview.date).map(item =>
return <DayView
key=item.index
date=item.date
high=item.high
low=item.low
medium=item.medium />
)
</section>
</main>
)
这是一个 json-sn-p,这里没什么奇怪的:
[
"date": "2016-12-13",
"high": 3,
"medium": 18,
"low": 0
,
"date": "2016-12-20",
"high": 1,
"medium": 27,
"low": 0
]
非常感谢任何意见!
【问题讨论】:
(ex: this.state.data.date), the value returns "undefined"
很明显,它没有找到日期,这就是它未定义的原因。应该是 dayview,因为我认为 datview 是数组,其中包含对象中的日期
如果data
是一个数组this.state.data.date
将不起作用。
啊,data是一个数组。您能指导我找到更好的访问方式吗?
【参考方案1】:
您不能像this.state.data.date
这样访问数组中对象的属性。
javascript 将在数组中查找 data
,而不是在 data
数组中的对象中。
要获取 Array 中的对象,您可以这样做:
this.state.data[0].date
.
但我相信你想修改代码:
<section>
this.state.dayview && this.state.data.filter(x =>
x.date === this.state.dayview[0].date).map(item =>
return <DayView
key=item.index
date=item.date
high=item.high
low=item.low
medium=item.medium />
)
</section>
dayview
是一个数组,这就是为什么:
this.state.dayview[0].date
【讨论】:
是的!谢谢 - 这工作!感谢您帮助新手。以上是关于从 JSON 访问数据返回“未定义”的主要内容,如果未能解决你的问题,请参考以下文章