React / Javascript：地图功能

Question

我已经尝试了所有有关映射函数和语法的知识，但是我一直得到TypeError: Cannot read property 'action' of undefined 。 我认为问题的根源是这一行： constructor(data=[]) 。 首先，除了props 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>
    )
    }
}

我的资料：

Answer 1

它将是data.action.map而不是data.action.action.map

Answer 2

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

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

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

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