Реагировать / Javascript: функция карты

Question

Я перепробовал все, что знаю о функциях карты и синтаксисе, но продолжаю получать 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>
    )
    }
}

Мои данные:

Answer 1

Вы удалили исходное пустое data определение свойства в конструкторе

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

Пусто data может быть отображено без ошибки. Удаляя его не определено - как это может работать?

constructor({data=[]}) - это просто реквизиты по умолчанию, инициализированные пустым массивом данных, передаваемым позже в базовый класс (супер ({data}), где, вероятно, установлено состояние? в карте. В книге код data прямо определен в штате - актуален ли ваш код?

Answer 2

Это будет data.action.map вместо data.action.action.map