TypeError: Cannot read property 'opacity' of null

Question

我正在尝试在 React 重新图表中将鼠标悬停在图例上时实现不透明度更改：https://jsfiddle.net/alidingling/1p40zzfe/

但是，我总是收到错误：TypeError：无法读取 null 的属性 'opacity'。有什么原因吗？它的 Legend 组件具有导致问题的 "OnMouseEnter" 和 "OnMouseLeave" 行。

谢谢

class EducationPageRouter extends React.Component{
  getInitialState() {
    return {
        opacity: {
        car: 1,
        phone: 1,
      },
    };
  }

  handleMouseEnter(o) {
    const { dataKey } = o;
    const { opacity } = this.state;

    this.setState({
        opacity: { ...opacity, [dataKey]: 0.5 },
    });
  }

  handleMouseLeave(o) {
    const { dataKey } = o;
    const { opacity } = this.state;

    this.setState({
        opacity: { ...opacity, [dataKey]: 1 },
    });
  }

  render() {
    const { opacity } = this.state;

    return (

      <Card>
        <CardContent>
          <Typography variant="title" color="primary" gutterBottom="true">
            Sales Information Display
          </Typography>
          <Typography variant="header1" color="primary" gutterBottom="true">
            Line Graph - Number of Sales to Date Time
          </Typography>
          <Button variant="raised" color="primary">
            Switch
          </Button>

          <ResponsiveContainer width="95%" aspect={9.5/3.8}>
            <LineChart
              data={formattedSales}
              margin={{ top:5, right:10, bottom:5, left:20 }}
            >
              <XAxis
                dataKey="date"
                padding={{ left:0, right:50 }}
                style={{ fontFamily: "Roboto, sans-serif" }}
                tick={{ fontSize: "12.5px"}}
              />
              <YAxis
                dataKey="car"
              />
              <CartesianGrid
                stroke="#f5f5f5"
                strokeDasharray="2.5 2.5"
              />
              <Tooltip
                wrapperStyle={{ fontFamily: "Roboto, sans-serif" }}
              />

              <Legend
                onMouseEnter={this.handleMouseEnter} 
                onMouseLeave={this.handleMouseLeave}
                wrapperStyle={{ fontFamily: "Roboto, sans-serif" }}
                verticalAlign="bottom"
                height={40}
              />

              <Line
                type="monotone"
                dataKey="car"
                stroke="#4169e1"
              />
              <Line
                type="monotone"
                dataKey="phone"
                stroke="#fa8072"
              />
            </LineChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>
    )
  }
}

Answer 1

getInitialState 只能与 createReactClass 一起使用，所以你的状态将是 null。您可以改为在构造函数中设置初始状态，或使用 class 属性.

您的事件处理程序 handleMouseEnter 和 handleMouseLeave 未绑定，因此 this 不会是您在其中所期望的。解决这个问题的一种方法是在构造函数中将它们绑定到 this，或者将它们变成属性初始化箭头函数。

class EducationPageRouter extends React.Component {
  state = {
    opacity: {
      car: 1,
      phone: 1,
    }
  };

  handleMouseEnter = o => {
    const { dataKey } = o;
    const { opacity } = this.state;

    this.setState({
      opacity: { ...opacity, [dataKey]: 0.5 }
    });
  };

  handleMouseLeave = o => {
    const { dataKey } = o;
    const { opacity } = this.state;

    this.setState({
      opacity: { ...opacity, [dataKey]: 1 }
    });
  };

  // ...
}

TypeError: Cannot read property 'opacity' of null

TypeError: Cannot read property 'opacity' of null

javascript

reactjs

jsx

recharts