我正在尝试创建一个能够删除列表中项目的点击事件，但是当我点击它时，我得到“类型错误:无法读取未定义的属性‘props’”。

我尽量坚持使用 ES6，而且我很确定在某处绑定(bind)“this”是一件好事，但我尝试了很多地方但都没有成功。

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    render() {
        return (
            <div className="App">
                <StreetFighter />
            </div>
        );
    }
}

class StreetFighter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            characters: [
                'Chun-Li',
                'Guile',
                'Ryu',
                'Ken',
                'E.Honda',
                'Dhalsim',
            ],
        };
    }
    render() {
        let characters = this.state.characters;
        characters = characters.map((char, index) => {
            return (
                <Character char={char} key={index} onDelete={this.onDelete} />
            );
        });
        return (
            <div>
                <p>Street Fighter Characters</p>
                <ul>{characters}</ul>
            </div>
        );
    }
    onDelete(chosenCharacter) {
        let updatedCharactersList = this.state.characters.filter(
            (char, index) => {
                return chosenCharacter !== char;
            }
        );

        this.setState({
            characters: updatedCharactersList,
        });
    }
}

class Character extends Component {
    render() {
        return (
            <li>
                <div className="character">
                    <span className="character-name">{this.props.char}</span>
                    <span
                        className="character-delete"
                        onClick={this.handleDelete}
                        > x </span>
                </div>
            </li>
        )
    };

    handleDelete() {
        this.props.onDelete(this.props.char);
    }
}


export default App;

最佳答案

TLDR:您代码中的具体问题已在本答案末尾的段落中说明。

这是 JavaScript 的经典问题 this ，如果您还没有读过，我建议您先阅读一下。

简而言之(不只是为了你，如果其他人正在阅读这篇文章)，一个 JavaScript 函数定义(如果不是写成 arrow function )重新定义什么 this是，即它指向的是什么。 所以当你定义它时:

handleDelete() {
     this.props.onDelete(this.props.char);
}

该函数的 this 未指向定义它的类的对象实例。如果您来自 C++/C#/Java 背景，这有点违反直觉。问题是 this 在类进入 JavaScript 之前就已经退出了，而且类不仅仅是一个函数的语法糖，具有一堆已定义的原型(prototype)(参见 here )，或者换句话说它确实如此默认情况下不将 this 绑定(bind)到它的函数。

有几种典型的解决方法:

将 this 绑定(bind)到所有函数(在构造函数中)

class Character extends Component {
    constructor(props) {
        super(props)
        this.handleDelete = this.handleDelete.bind(this)
    }
    render() {
        // ...
    };

    handleDelete() {
        this.props.onDelete(this.props.char);
    }
}

注意:您可以在每次使用函数时绑定(bind)this(即onClick={this.handleDelete .bind(this)}，但它不可取，因为如果您忘记绑定(bind) this，它会使您的代码容易出错。另外，如果你在链接函数，你可能会在某处指向错误的东西。更不用说 bind 是一个函数，在 React 中你将在每个渲染器上进行函数调用。然而，它是一个如果您遇到必须更改this的情况，请记住一件好事。

使用箭头函数

class Character extends Component {
    render() {
        // ...
    };

    handleDelete = () => {
        this.props.onDelete(this.props.char);
    }
}

如上所述，在其他答案中，箭头函数不会重新定义 this 指针。您在这里有效地做的是将箭头函数分配给此类的对象实例的属性。换句话说，该函数(作为不重新定义 this 的箭头函数)从外部范围(类的范围)获取 this，但是，因为箭头函数是匿名函数，您通过将其分配给 name property 来命名它.

所有其他解决方案都是上述两种解决方案的一些变体

关于你的解决方案

onDelete 和 handleDelete 都遇到了this 问题。

另外，作为 @Alyson Maia如上所述，您的 Character 组件可以写成 functional component :

const Character = (props) => {
    render() {
        return (
           <li>
                <div className="character">
                    <span className="character-name">{this.props.char}</span>
                    <span
                        className="character-delete"
                        onClick={props.onDelete(props.char)}
                        > x </span>
                </div>
           </li>
        )
    };
}

关于javascript - react - 类型错误 : Cannot read property 'props' of undefined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50862192/