每次我尝试在输入字段中输入内容时,我都无法在代码中找到此错误的解决方案。类型错误:无法读取未定义的属性“名称”
我是 react 新手,对此了解不多。
这是我文件中的所有代码
import React from'react';
import Notelist from '../componenets/notelist';
import { Link } from 'react-router-dom';
export default class NewPage extends React.Component {
state = {
note:{
title: '',
body: '',
createdAt: undefined,
updatedAt: undefined
}
}
updateValue = (e) => {
const { note } = this.state;
this.setState({
note: { ...note, [e.title.name]: e.target.value }
});
}
handleSave = (e) => {
e.preventDefault();
const id = this.props.onSave(this.state.note);
this.props.history.replace(`/notes/${ id }`);
}
render() {
const { note } = this.state;
return (
<div className="note-form">
<h1>New Note</h1>
<form onSubmit={this.handleSave}>
<div className="note-form-field">
<label>Title: </label><br/>
<input className="input-txt" type="text" name="title" value={note.title} onChange={this.updateValue}/>
</div>
<div className="note-form-field note-form-field-text">
<br/>
<textarea name="body" value={note.body} onChange={this.updateValue} />
</div>
<div className="note-form-buttons">
<button className="btn">Save</button>
<Link to="/">Cancel</Link>
</div>
</form>
</div>
);
}
}
这是我得到的完整错误:
类型错误:无法读取未定义的属性“名称” 新页.updateValue C:/Users/user/react-notes/src/pages/new.js:20
17 | const { note } = this.state;
18 |
19 | this.setState({
> 20 | note: { ...note, [e.title.name]: e.target.value }
| ^ 21 | });
22 | }
23 |
查看编译结果
最佳答案
event
对象 (e) 没有名为 title
的键,这就是为什么您收到“无法读取未定义的属性名称”的原因。
您需要event.target
,它指的是导致此事件发生的元素。
尝试以下方法来动态更新状态值
。它将找到与元素的 name
匹配的键,并为其赋予该元素的值(如用户输入):
updateValue = (e) => {
const { note } = this.state;
this.setState({
note: { ...note, [e.target.name]: e.target.value }
});
}
关于javascript - 类型错误 : Cannot read property 'name' of undefined react error,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57519291/