javascript - Prop 值未显示在 ReactJS 函数的渲染顶部

Question

但是 this.props.NotesAll 从另一个组件检索对象，并且它在 render() 方法下显示对象，但是当我尝试使用 this.props.NotesAll 在函数上渲染以处理这些对象，我试图用控制台检查函数上的值，它总是说是未定义的狗屎。所以请帮我看看 ReactNinja 到底出了什么问题。

这里的代码您可以查看

export default class EditNotes extends Component {
    constructor(props) {
        super(props);
        this.state ={};
    }


    handleEdit() {
        console.log(this + ' Clicked on That ');
    }

//Here it's throwing error when I'm trying to click and console. the problem is here. i want this.props.NotesAll value here also to finding elements from objects
    handleDelete(id) {
        let Notes = this.props.NotesAll;
        console.log(Notes)
    }

    render() {
        let noteItems;

//this.props.NotesAll 在这里工作正常。

        if (this.props.NotesAll) {
            noteItems = this.props.NotesAll.map( Note => {
                return(
                    <li key={Note.id}>{Note.body}
                    <button onClick={this.handleEdit.bind(Note.id)} className="btn btn-primary btn-sm">Edit</button>
                    <button onClick={this.handleDelete.bind(Note.id)} className="btn btn-danger btn-sm">Delete</button></li>
                    );
            });
        }
        return(
            <div className="col-md-4">
                <h3 className="header-ttile">Current Notes:</h3>
                <ul className="note-item-wrapper">
                {noteItems}
                </ul>
            </div>
            );
    }
}

Answer 1

您以错误的方式定义了绑定(bind)，第一个参数将是您要绑定(bind)的上下文。

使用这个:

<button onClick={this.handleDelete.bind(this, Note.id)}

<强> Syntax:

fun.bind(thisArg[, arg1[, arg2[, ...]]])

这个参数:

The value to be passed as the this parameter to the target function when the bound function is called.