无法读取 属性 个未定义的卡片 material ui

Question

我在我的 React 项目中使用来自 material ui 的卡片。我想在我的卡片中使用两个函数，onMouseOver 和 onMouseOut。但是我的代码给我一个错误 "Uncaught TypeError: Cannot read property 'onMouseOver' of undefined"。这是我的代码中关于该部分的摘要。

class ExpandableCard extends Component {
    constructor(props) {
        super(props);
        this.state = {shadow: 1}
    }

    onMouseOver = () => this.setState({shadow: 3});

    onMouseOut = () => {this.setState({shadow: 1})
    };

    render(){
        var Populate = this.props.mediaFiles.map(function (value) {
            return (
            <MuiThemeProvider>
                <Card key = {value.id}
                      onMouseOver={this.onMouseOver}
                      onMouseOut={this.onMouseOut}
                      zDepth={this.state.shadow}
                >

Answer 1

看来您只是遇到了基本的 javascript 问题，即 render 方法中的 map 函数中缺少上下文 (this)。

我建议您将 render 中的 map 函数更改为箭头函数（这样它会将外部上下文保留在内部函数中），这应该足够了。 :)

render() {
  var Populate = this.props.mediaFiles.map((value) => {
    return (
      <MuiThemeProvider>
        <Card key = {value.id}
          onMouseOver={this.onMouseOver}
          onMouseOut={this.onMouseOut}
          zDepth={this.state.shadow}
        >
        ...