类型错误：无法读取的不确定

Question

财产“编辑”我一直得到以下2个错误我的按钮：

TypeError: Cannot read property 'edit' of undefined 

TypeError: Cannot read property 'remove' of undefined 

我建立一个待办事项列表，每一个音符都有2个按钮“添加”和“删除” 。 当我调用DisplayNote一次时，我设法使笔记按钮正常工作。 每当我尝试使用JS地图做出多个笔记按钮停止工作，我不明白为什么它现在不工作。代码附加。 todo list image

import React from 'react'; 
 

 
class DisplayNote extends React.Component { 
 
\t handleEdit(e) { 
 
\t \t console.log('sdfsdfdfs'); 
 
\t \t this.props.edit(e) 
 
\t } 
 
\t handleRemove(e) { 
 
\t \t console.log('sdfsdfdfs'); 
 
\t \t this.props.remove(e) 
 
\t } 
 

 
\t render(){ 
 
\t \t return(
 
\t \t \t <div className="note"> 
 
\t \t \t \t <p>{this.props.note}</p> 
 
\t \t \t \t <span> 
 
\t \t \t \t \t <button onClick={this.handleEdit.bind(this)}>Edit</button> 
 
\t \t \t \t </span> 
 
\t \t \t \t <span> 
 
\t \t \t \t \t <button onClick={this.handleRemove.bind(this)}>Remove</button> 
 
\t \t \t \t </span> 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
} 
 

 
class EditNote extends React.Component { 
 
\t handleSave(e) { 
 
\t \t var val = this.refs.newText.value; 
 
\t \t this.props.saveNote(val) 
 
\t } 
 
\t render(){ 
 
\t \t return (
 
\t \t \t <div className="note"> 
 
\t \t \t \t <textarea ref="newText" defaultValue="test"> 
 
\t \t \t \t </textarea> 
 
\t \t \t \t <button onClick={this.handleSave.bind(this)}>Save</button> 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
} 
 

 
class App extends React.Component { 
 
\t constructor(props) { 
 
\t \t super(props); 
 

 
\t \t this.edit = this.edit.bind(this); 
 
\t \t this.saveNote = this.saveNote.bind(this); 
 
\t \t this.remove = this.remove.bind(this); 
 

 
\t \t this.state = { 
 
\t \t \t editing: false, 
 
\t \t \t notes: ['Call Tim','sdsdsd', 'dentist', 'Email Julie'] 
 
\t \t } 
 
\t } 
 

 
\t AppObject = { 
 
\t \t count: 1, 
 
\t \t price: 15.00, 
 
\t \t amount: '12' 
 
\t } 
 

 
\t AppArray = ['tim','ali', 'jim', 'tom'] 
 

 
\t edit(e) { 
 
\t \t this.setState({editing: true}); 
 
\t \t console.log('AppObject', this.AppObject); 
 
\t } 
 

 
\t saveNote(val) { 
 
\t \t this.setState({editing: false}); 
 
\t \t console.log('Save note value ' + val) 
 
\t } 
 

 
\t remove() { 
 
\t \t alert('remove'); 
 
\t \t console.log('AppArray', this.AppArray); 
 
\t } 
 

 
\t eachNote(note, i) { 
 
\t \t return(
 
\t \t \t <DisplayNote key={i} 
 
\t \t \t \t \t \t note={note} 
 
\t \t \t \t \t \t edit={(e) => this.edit(e)} 
 
\t \t \t \t \t \t remove={(e) => this.remove(e)}> 
 
\t \t \t \t \t \t {note} 
 
\t \t \t </DisplayNote> 
 
\t \t); 
 
\t } 
 

 
\t render() { 
 
\t \t if(this.state.editing) { 
 
\t \t \t return (
 
\t \t \t \t \t <div> 
 
\t \t \t \t \t \t <EditNote saveNote={(e) => this.saveNote(e)} /> 
 
\t \t \t \t \t \t <div>{this.props.count}</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t); 
 
\t \t }else{ 
 
\t \t \t return (
 
\t \t \t \t \t <div> 
 
\t \t \t \t \t \t /* Calling it once*/<DisplayNote edit={(e) => this.edit(e)} remove={(e) => this.remove(e)} /> 
 
\t \t \t \t \t \t <div>{this.props.count}</div> 
 
\t \t \t \t \t \t <div> 
 
\t \t \t \t \t \t \t /* Using map to create multiple notes */{this.state.notes.map(this.eachNote)} 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t); 
 
\t \t } 
 

 
\t } 
 
} 
 

 
App.propTypes = { 
 
\t count: function(props, propName){ 
 
\t \t if(typeof props[propName] !== 'number'){ 
 
\t \t \t return new Error('Count prop must be a number'); 
 
\t \t } 
 
\t \t if(props[propName] > 100){ 
 
\t \t \t return new Error('Creating ' + props[propName] + ' notes is too much!'); 
 
\t \t } 
 
\t } 
 
} 
 

 
export default App;

Answer 1

我觉得你失去了context内map功能，你需要定义binding为也。

使用该线路constructor，它将bind是function：

this.eachNote = this.eachNote.bind(this); 

或使用function这样的：

{this.state.notes.map((note, i) => this.eachNote(note,i)} 

或者

{this.state.notes.map(this.eachNote)} 

eachNote = (note, i) => { //use arrow function here 

}