当我试图用我的数据呈现一个图表时,我遇到了React的问题。页面是空白的,但是控制台给了我这个错误消息:
警告: React.createElement:类型无效--应为字符串(对于内置组件)或类/函数(对于复合组件),但got: object。
我发送了一个查询,在阿波罗和图形of的帮助下,Neo4j数据库,并希望显示一些结果。上面的错误来自我的图形组件(UserList.js)
UserList.js
class Graph extends React.Component {
constructor({data}) {
//console.log('construc data' ,data);
const times = d3.extent(data.action.map(action => action.timestamp))
console.log('construc data' ,times);
const range = [50, 450]
super({data})
this.scale = d3.time.scale().domain(times).range(range)
this.state = {data, times, range}
//console.log('state' ,this.data);
}
componentDidMount() {
let group
const { target } = this.refs
const Canvas = ({children}) =>
<svg height="200" width="500">
{children}
</svg>
group.append('circle')
.attr('cy', 160)
.attr('r', 5)
.style('fill', 'blue')
group.append('text')
.text(d => d.year + " - " + d.event)
.style('font-size', 10)
.attr('y', 115)
.attr('x', -95)
.attr('transform', 'rotate(-45)')
const TimelineDot = ({position, txt}) =>
<g transform={`translate(${position},0)`}>
<circle cy={160}
r={5}
style={{fill: 'blue'}} />
<text y={115}
x={-95}
transform="rotate(-45)"
style={{fontSize: '10px'}}>{txt}</text>
</g>
}
render() {
const { data } = this.state
const { scale } = this
return (
<div className="timeline">
<h1>{this.props.name} Timeline</h1>
<Canvas>
{data.action.map((action, i) =>
<TimelineDot position={scale(action.timestamp)}
txt={`${action.timestamp} - ${action.action}`}
/>
)}
</Canvas>
</div>
)
}
}
export default graphql(getObjectsQuery,
{ options: (ownProps) => {
console.log(ownProps.startTime);
return ({ second: { startTime: ownProps.startTime,
endTime: ownProps.endTime
} })
} } )(Graph);
发布于 2018-08-26 09:45:52
看起来你在componentDidMount()
中定义了const Canvas =
和const TimelineDot =
,所以这是他们唯一知道的地方。尝试将定义它们移动到render()
中以使用它们。
发布于 2018-08-29 17:56:02
“options”中定义的函数应返回object:
return { second: { startTime: ownProps.startTime,
endTime: ownProps.endTime
} }
带大括号的解释为标记/反应组件(jsx) -对象不是标记/组件,则出现错误
https://stackoverflow.com/questions/52020919
复制相似问题