从ReactJS中的.map函数访问类方法[重复]?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (76)

这个问题在这里已有答案:

我有以下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

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

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

先感谢您。

提问于
用户回答回答于

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

扫码关注云+社区

领取腾讯云代金券