Reactjs 使用onClick循环列表不'；t工作反应

我是ReactJs的新手，在JavaScript数组循环方面确实存在一些问题。我已经成功地在没有错误的情况下完成了循环，但是当我在每个列表上添加删除按钮并单击removeSkill函数时，我得到一个错误“app.js:59097 Uncaught TypeError:无法读取未定义的属性'removeSkill'”

无误

const skillLists = this.state.skills.map(function(val){
                return <li>{val}</li>
            });

const skillLists=this.state.skills.map（函数（val））{
返回
{val}
});

错误地

const skillLists = this.state.skills.map(function(val){
                return <li>{val} <button onClick={this.removeSkill}>x</button></li>
            });

const skillLists=this.state.skills.map（函数（val））{
返回
{val}x
});

完整代码

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Skills extends Component {
    constructor(props) {
        super(props);

        this.state = { 
            skills : ["Frost Bolt", "Arcane Missle"],
            skillField : ''
        };

        this.addSkill = this.addSkill.bind(this);
        this.removeSkill = this.removeSkill.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.clearField = this.clearField.bind(this);
    }

    clearField() {
        this.state.skillField = '';
    }

    handleChange(event) {
        this.setState({
            skillField : event.target.value
        });
    }

    addSkill() {
        this.state.skills.push(this.state.skillField);
        this.setState({
            skills: this.state.skills
        });
        console.log(this.state.skills);
        this.clearField();
    }

    removeSkill() {
        console.log("skillremoved");
    }

    render() {
        const skillLists = this.state.skills.map(function(val){
            return <li>{val} <button onClick={this.removeSkill}>x</button></li>
        });
        return (
            <div>
                <input onChange={this.handleChange} value={this.state.skillField} />
                <button onClick={this.addSkill}>Add Skill</button>
                <h4>Skills</h4>
                <ul>{skillLists}</ul>
            </div>
        );
    }
}

export default Skills;

import React，{Component}来自'React'；
从“react dom”导入react dom；
类技能扩展组件{
建造师（道具）{
超级（道具）；
this.state={
技能：[“冰霜之箭”，“奥术飞弹”]，
skillField:“”
};
this.addSkill=this.addSkill.bind（this）；
this.removeSkill=this.removeSkill.bind（this）；
this.handleChange=this.handleChange.bind（this）；
this.clearField=this.clearField.bind（this）；
}
clearField（）{
this.state.skillField=''；
}
手变（活动）{
这是我的国家({
skillField:event.target.value
});
}
addSkill（）{
this.state.skills.push（this.state.skillField）；
这是我的国家({
技能：这个。状态。技能
});
console.log（this.state.skills）；
这个.clearField（）；
}
removeSkill（）{
console.log（“skillremoved”）；
}
render（）{
const skillLists=this.state.skills.map（函数（val）{
返回
{val}x
});
返回(
增加技能
技能
{skillLists}
);
}
}
输出默认技能；

---

任何帮助都将不胜感激。谢谢

问题在于您没有使用箭头函数，因此您丢失了对

此

的引用

const skillLists = this.state.skills.map(function(val){
        return <li>{val} <button onClick={this.removeSkill}>x</button></li>
    });

const skillLists=this.state.skills.map（函数（val））{
返回
{val}x
});

尝试使用箭头函数

const skillLists = this.state.skills.map((val) => {
        return <li>{val} <button onClick={this.removeSkill}>x</button></li>
    });

const skillLists=this.state.skills.map（（val）=>{
返回
{val}x
});

问题在于您没有使用箭头功能，因此您失去了对

此

的引用

const skillLists = this.state.skills.map(function(val){
        return <li>{val} <button onClick={this.removeSkill}>x</button></li>
    });

const skillLists=this.state.skills.map（函数（val））{
返回
{val}x
});

尝试使用箭头函数

const skillLists = this.state.skills.map((val) => {
        return <li>{val} <button onClick={this.removeSkill}>x</button></li>
    });

const skillLists=this.state.skills.map（（val）=>{
返回
{val}x
});

但是为什么呢！？这是我近2天来的问题，使用for循环，console.log上的值显示正确的值，但onclick显示未定义。使用箭头功能解决了我的问题，谢谢！但是为什么！？这是我近2天来的问题，使用for循环，console.log上的值显示正确的值，但onclick显示未定义。使用箭头功能解决了我的问题，谢谢！