React Vis MarkSeries 抛出 x function is not defined 错误

Question

有人用过react-vis吗？当用户将鼠标悬停在图表上时，我试图在线条系列上呈现标记。

问题是它一直在抛出错误

x is not a function.

有人运行遇到过这样的问题吗？当我尝试渲染标记或尝试在线条系列上显示工具提示时出现错误。

这是我的渲染函数

<XYPlot
  onMouseLeave={this.handleMouseOver}
  handleMouseOver={this.handleMouseOver}
  xAxis={{
    tickValue: xAxis,
    tickFormat: this.formatXAxisTick,
    timeUnit: TIMEUNIT[chartHorizontalUnit]
  }}
  yAxis={{
    tickValue: yAxisLabelArray,
    tickFormat: value => `${value} ${chartVerticalUnit}`
  }}
>
  {lineList.map((line, index) => (
    <LineSeries
      key={index}
      {...line.toJS()}
      curve="curveMonotoneX"
      selected={
        isNull(selectedLegendValue) || line.get("label") === selectedLegendValue
      }
      {...(line.get("data").size === 1 ? { sizeDomain: [] } : null)}
      onNearestX={(datapoint, { index, event, innerX }) =>
        this.handleMouseOver(datapoint, event, innerX)
      }
    />
  ))}

  {toolTipValue && toolTipValue.size && (
    <>
      {toolTipValue.map((lineData, i) => (
        <MarkSeries
          key={`mark-${i}`}
          color={lineData.get("label")}
          stroke="white"
          strokeWidth={2}
          data={[
            {
              x: lineData.get("x"),
              y: lineData.get("y")
            }
          ]}
        />
      ))}
    </>
  )}
</XYPlot>;

XYPlot 是 react-vis XYPlot 的包装器。 X 轴和 Y 轴。还有其他人运行遇到过此类问题吗？

错误截图如下

Answer 1

所以我能够找出这里出了什么问题。您不能将 react-vis 组件包装在包装器中。如果我们真的想将它包装在包装器中，那么我们将不得不像调用函数一样调用包装器。

Using React.Fragment · Issue #1095 · uber/react-vis

React Vis MarkSeries 抛出 x function is not defined 错误

React Vis MarkSeries is throwing x function is not defined error

javascript

charts

reactjs

react-vis