React/Javascript：地图功能答案

【问题标题】：React/Javascript: Map functionReact/Javascript：地图功能
【发布时间】：2019-01-31 18:25:30
【问题描述】：

我已经尝试了所有关于地图函数和语法的知识，但我不断收到TypeError: Cannot read property 'action' of undefined。我认为问题的根源是这一行：constructor(data=[])。首先，除了道具constructor(props) 之外，我从未见过构造函数的括号内。所以，不知道那里发生了什么。

我正在阅读一本关于 React/D3 的书，作者从键/值对的静态数组中渲染了一个点的时间线。我正在尝试渲染相同的图表，但我的数据来自数据库。有人可以帮我重构下面的代码，以解决在渲染之前获取“数据”的数据库请求吗？

书籍代码：

constructor({data=[]}) {
        const times = d3.extent(data.map(d => d.year))
        const range = [50, 450]
        super({data})
        this.state = {data, times, range}
    }

    componentDidMount() {
        let group
        const { data, times, range } = this.state
        const { target } = this.refs
        const scale = d3.time.scale().domain(times).range(range)

我的代码：

    constructor(data=[]) {

        const times = d3.extent(data.action.action.map(action => action.timestamp))
        const range = [50, 450]
        super({data})
        this.scale = d3.scaleTime().domain(times).range(range)
        this.state = {times, range}
        console.log('state' ,this.data);
    }

render() {
    const { data } = this.state
    const { scale } = this
    return (
        <div className="timeline">
            <h1>{this.props.name} Timeline</h1>
            <Canvas>
                {data.map((d, i) => 
                    <TimelineDot position={scale(d.year)} 
                                 txt={`${d.year} - ${d.event}`}
                    />
                )}
            </Canvas>
        </div>
    )
    }
}

我的数据：

【问题讨论】：

标签： javascript reactjs graphql-js map-function

【解决方案1】：

应该是 data.action.map 而不是 data.action.action.map

【讨论】：

现在我得到这个：TypeError: Cannot read property 'map' of undefined.
我认为地图未定义的原因是当按下提交按钮时手动发送数据的数据库请求，而不是在呈现程序时或从书中的静态数据集中发送。跨度>

【解决方案2】：

您在构造函数中删除了初始的空 data 属性定义

this.state = {data, times, range} // book
this.state = {times, range}       // your code

空的data 可以映射而不会出错。通过删除它是未定义的 - 它如何工作？

constructor({data=[]}) 只是用空数据数组初始化的默认道具，稍后传递给基类（通过 super({data}) 可能设置为状态？W/o const { data } = this.state 应该未定义，无法使用在地图中。在书中代码data 直接在状态中定义 - 您的代码是最新的吗？

【讨论】：