Question

我的按钮一直出现以下两个错误：

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 {
	handleEdit(e) {
		console.log('sdfsdfdfs');
		this.props.edit(e)
	}
	handleRemove(e) {
		console.log('sdfsdfdfs');
		this.props.remove(e)
	}

	render(){
		return(
			<div className="note">
				<p>{this.props.note}</p>
				<span>
					<button onClick={this.handleEdit.bind(this)}>Edit</button>
				</span>
				<span>
					<button onClick={this.handleRemove.bind(this)}>Remove</button>
				</span>
			</div>
		);
	}
}

class EditNote extends React.Component {
	handleSave(e) {
		var val = this.refs.newText.value;
		this.props.saveNote(val)
	}
	render(){
		return (
			<div className="note">
				<textarea ref="newText" defaultValue="test">
				</textarea>
				<button onClick={this.handleSave.bind(this)}>Save</button>
			</div>
		);
	}
}

class App extends React.Component {
	constructor(props) {
		super(props);

		this.edit = this.edit.bind(this);
		this.saveNote = this.saveNote.bind(this);
		this.remove = this.remove.bind(this);

		this.state = {
			editing: false,
			notes: ['Call Tim','sdsdsd', 'dentist', 'Email Julie']
		}
	}

	AppObject = {
		count: 1,
		price: 15.00,
		amount: '12'
	}

	AppArray = ['tim','ali', 'jim', 'tom']

	edit(e) {
		this.setState({editing: true});
		console.log('AppObject', this.AppObject);
	}

	saveNote(val) {
		this.setState({editing: false});
		console.log('Save note value ' + val)
	}

	remove() {
		alert('remove');
		console.log('AppArray', this.AppArray);
	}

	eachNote(note, i) {
		return(
			<DisplayNote key={i} 
						note={note}
						edit={(e) => this.edit(e)} 
						remove={(e) => this.remove(e)}>
						{note}
			</DisplayNote>
		);
	}

	render() {
		if(this.state.editing) {
			return (
					<div>
						<EditNote saveNote={(e) => this.saveNote(e)} />
						<div>{this.props.count}</div>
					</div>
				);
		}else{
			return (
					<div>
						/* Calling it once*/<DisplayNote edit={(e) => this.edit(e)} remove={(e) => this.remove(e)} />
						<div>{this.props.count}</div>
						<div>
							/* Using map to create multiple notes */{this.state.notes.map(this.eachNote)}
						</div>
					</div>
				);
		}

	}
}

App.propTypes = {
	count: function(props, propName){
		if(typeof props[propName] !== 'number'){
			return new Error('Count prop must be a number');
		}
		if(props[propName] > 100){
			return new Error('Creating ' + props[propName] + ' notes is too much!');
		}
	}
}

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

}

或者

{{1}}

TypeError：无法读取undefined的属性'edit'

1 个答案: