React/Javascript:地图函数
React/Javascript: Map function
我已经尝试了我所知道的关于地图函数和语法的所有知识,但我总是得到 TypeError: Cannot read property 'action' of undefined
。我认为问题的根源是这一行:constructor(data=[])
。首先,除了 props constructor(props)
之外,我从未在构造函数的括号内看到过。所以,不确定那里发生了什么。
我正在阅读一本关于 React/D3 的书,作者从 key/value 对的静态数组中渲染了点的时间轴。我正在尝试呈现相同的图形,但我的数据来自数据库。有人可以帮我重构下面的代码以解决在渲染之前抓取 'data' 的数据库请求吗?
图书编号:
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>
)
}
}
我的数据:
应该是data.action.map而不是data.action.action.map
您删除了构造函数中的初始空 data
属性 定义
this.state = {data, times, range} // book
this.state = {times, range} // your code
空 data
可以映射 w/o 错误。通过删除它是未定义的 - 它如何工作?
constructor({data=[]})
只是用空数据数组初始化的默认道具,稍后传递给基础 class (由 super({data}) 可能设置在状态中的位置? W/o const { data } = this.state
应该是未定义的,不能在地图中使用。在书中代码 data
是直接在状态中定义的 - 你的代码是最新的吗?
我已经尝试了我所知道的关于地图函数和语法的所有知识,但我总是得到 TypeError: Cannot read property 'action' of undefined
。我认为问题的根源是这一行:constructor(data=[])
。首先,除了 props constructor(props)
之外,我从未在构造函数的括号内看到过。所以,不确定那里发生了什么。
我正在阅读一本关于 React/D3 的书,作者从 key/value 对的静态数组中渲染了点的时间轴。我正在尝试呈现相同的图形,但我的数据来自数据库。有人可以帮我重构下面的代码以解决在渲染之前抓取 'data' 的数据库请求吗?
图书编号:
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>
)
}
}
我的数据:
应该是data.action.map而不是data.action.action.map
您删除了构造函数中的初始空 data
属性 定义
this.state = {data, times, range} // book
this.state = {times, range} // your code
空 data
可以映射 w/o 错误。通过删除它是未定义的 - 它如何工作?
constructor({data=[]})
只是用空数据数组初始化的默认道具,稍后传递给基础 class (由 super({data}) 可能设置在状态中的位置? W/o const { data } = this.state
应该是未定义的,不能在地图中使用。在书中代码 data
是直接在状态中定义的 - 你的代码是最新的吗?