从 JSON 访问数据返回“未定义”

Posted 2023-02-22

【中文标题】从 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

【讨论】：

是的！谢谢 - 这工作！感谢您帮助新手。