Question

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

但是，我总是收到错误消息：TypeError：无法读取null的属性“ opacity”。有什么理由吗？其图例组件具有导致问题的行“ OnMouseEnter”和“ OnMouseLeave”。

谢谢

#include <stdio.h>
#include <stdlib.h>


int main(int argc, char *argv[]) {
    int n,d;
    while(1){
        printf("enter number");
        scanf("%d",n);
        d=n%10;
        while(d!=0){
            n=n/10;
            printf("%d",d);
            d=n%10;
        }

    }
    return 0;
}

Answer 1

getInitialState仅可与createReactClass一起使用，因此您的状态为null。您可以改为在构造函数中设置初始状态，或使用类属性。

您的事件处理程序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：无法读取null的属性“ opacity”

1 个答案: