Question

我有以下ReactJS文件：

import React, { Component } from "react";
import Topic from "./Topic";
import $ from "jquery";

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTrash, faEye } from '@fortawesome/free-solid-svg-icons'

library.add(faTrash, faEye);

class MainTopic extends Component {
    constructor() {
        super();
        this.state = { matter: [] };
    }
    componentDidMount(){
        $.ajax({
            url: "/api/all",
            dataType: "json",
            success: function (dados) {
                this.setState({matter:dados});
            }.bind(this)
        });
    }
    onDelete(dado){
        console.log(dado._id);
    }

    onEdit(dado){
        console.log(dado._id);
    };
    render() {
        const dados = this.state.matter;

        return (
            dados.map(function (dado) {
                let progressBarValues = {
                    width: dado.percentage_concluded
                };
                return (
                    <div key={dado._id} className="card mb-3">
                        <div className="card-header">
                            <span className="btn btn-light float-lg-right" onClick={() => this.onDelete(dado)}><FontAwesomeIcon icon="trash" /></span><span className="btn btn-light float-lg-right" onClick={(dado) => this.onEdit(dado)}><FontAwesomeIcon icon="eye" /></span>
                            <h4 className="card-title" ><a className="btn btn-dark" data-toggle="collapse" href={"#collapse-"+dado._id} role="button" aria-expanded="false" aria-controls={"collapse-"+dado._id}>{dado.title}</a></h4>
                            <div className="progress">
                                <div className="progress-bar" role="progressbar" style={progressBarValues} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div className="card-body collapse" id={"collapse-"+dado._id}>
                            <Topic topic={dado.topics} />
                        </div>
                    </div>
                );
            })
        );
    }

}

export default MainTopic;

我面临的错误是当我必须单击DELETE和VIEW按钮时。它只是给我以下错误： TypeError: Cannot read property 'onDelete' of undefined

我试图将函数绑定到 this ，但是在渲染视图之前它给我抛出了一个错误。

问题是如何在 .map 函数中访问方法。

谢谢。

Answer 1

在地图中使用箭头功能() => {}，而不是常规功能。

从ReactJS中的.map函数访问类方法

1 个答案: