Question

我正在使用Recharts在React中进行数据可视化，其中包含来自静态json文件的数据。当用户点击条形图时，该值将传递给app，处于状态（state.dayview []），我想将该特定图表区域的特定数据呈现给浏览器。因此，我想通过将完整json中的日期与图表上单击的日期相匹配来有条件地呈现DayView组件。

我有json状态（state.data），我可以记录状态没问题。但是，当我尝试访问json对象中的特定数据时（例如：this.state.data.date），该值返回“undefined”。下面我有一个工作正常的map方法，但是filter方法明显失败，因为没有检索到“date”键。我错过了什么？

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-snippet，这里没什么奇怪的：

[{
    "date": "2016-12-13",
    "high": 3,
    "medium": 18,
    "low": 0
}, {
    "date": "2016-12-20",
    "high": 1,
    "medium": 27,
    "low": 0
}]

我真的很感激任何意见！

Answer 1

您无法像this.state.data.date那样访问数组中对象的属性。 Javascript将在Array中查找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访问数据会返回“undefined”

1 个答案: