[英]TypeError: Cannot read property 'name' of undefined react error
I can't seep to find the solution to this error in my code every time I try to type something in my input field.每次尝试在输入字段中输入内容时,我都无法在代码中找到解决此错误的方法。 TypeError: Cannot read property 'name' of undefined
类型错误:无法读取未定义的属性“名称”
I'm new to react and don't know too much about.我是新来的反应,不太了解。
Here is all the code in my file这是我文件中的所有代码
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>
);
}
}
This is the full error I get:这是我得到的完整错误:
TypeError: Cannot read property 'name' of undefined NewPage.updateValue C:/Users/user/react-notes/src/pages/new.js:20类型错误:无法读取未定义的 NewPage.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 |
View compiled查看编译
The event
object (e) does not have a key called title
which is why you get "Cannot read property name of undefined". event
对象 (e) 没有名为title
的键,这就是您得到“无法读取未定义的属性名称”的原因。
You need event.target
, which refers to the element that is causing this event to occur.您需要
event.target
,它指的是导致此事件发生的元素。
Try the following to dynamically update a state-value
.尝试以下动态更新
state-value
。 It will find a key that matches the name
of the element, and give it the value coming to that element (like user input):它将找到一个与元素
name
匹配的键,并为其提供该元素的值(如用户输入):
updateValue = (e) => {
const { note } = this.state;
this.setState({
note: { ...note, [e.target.name]: e.target.value }
});
}
I believe you are trying to assign title
as key and value of the input field as value.我相信您正在尝试将
title
分配为输入字段的键和值作为值。 why don't you just try this?你为什么不试试这个?
updateValue = (e) => {
const { note } = this.state;
this.setState({
note: { ...note, "title": e.target.value }
});
}
the param e in the updateValue method is event object, it will not have a property called title.name. updateValue 方法中的参数 e 是事件对象,它不会有名为 title.name 的属性。 If you want to store the value of the title textbox to the property title of note object So your code can be like this
如果你想把title文本框的值存储到note对象的属性title中,那么你的代码可以是这样的
this.setState({
note: { ...note, title: e.target.value }
});
import React, { Component } from 'react'从“反应”导入反应,{ 组件}
export class Todolist2 extends Component {导出类 Todolist2 扩展组件 {
state={name:'',items:'',price:'',arr:[],errors:{name:'',items:'',price:''}}
todoSubmit=(event)=>
{
event.preventDefault()
let list=this.state.arr;
let tododata={name:this.state.name, items:this.state.items, price:this.state.price};
list.push(tododata);
this.setState({arr:list});
console.log(this.state.arr);
}
handle=(event)=>
{
const {name,value}=event.target;
let errors=this.state.error;
switch(errors)
{
case 'name':errors.name=value.length<2?"Name must be 2 character long":'';
case 'items':errors.items=value.length<2?"items must be 2 character long":'';
case 'price':errors.price=value.length<2?"price must be 2 character long":'';
}
this.setState({errors,[name]:value})
this.setState({[name]:value})
console.log(this.state);
}
deldata=(ind)=>
{
if (window.confirm('Do u want to delete'))
{
let list=this.state.arr;
list.splice(ind,1);
this.setState({arr:list});
}
// alert('do u want to delete');
}
render() {
const {errors}=this.state;
return (
<div>
<h1>ToDo List 2</h1>
<form className='container' onSubmit={this.todoSubmit}>
<div className="form-group col-md-4">
<label>Name:</label>
<input type="text" name="name" className='form-control' onChange={this.handle}/>
{errors.name.length>0 && <span className='alert alert-danger'>{errors.name}</span> }
</div>
<div className="form-group col-md-4" onChange={this.handle}>
<label>Items:</label>
<input type="text" name="items" class='form-control'/>
{errors.items.length>0 && <span className='alert alert-danger'>{errors.items}</span> }
</div>
<div className="form-group col-md-4" onChange={this.handle}>
<label>Price:</label>
<input type="text" name="price" class='form-control'/>
{errors.price.length>0 && <span className='alert alert-danger'>{errors.price}</span> }
</div>
<input type='Submit' value='Submit' class='btn btn-outline-success' />
<table class='table'>
<tr>
<th>S.no</th>
<th>Name</th>
<th>Items</th>
<th>Price</th>
<th>Action</th>
</tr>
{this.state.arr.map((data,ind)=>
<tr>
<td>{ind+1}</td>
<td>{data.name}</td>
<td>{data.items}</td>
<td>{data.price}</td>
<td><button class="btn btn-info btn-lg " onClick={()=>this.deldata(ind)}>delete </button></td>
</tr>
)}
</table>
</form>
</div>
)
}
} }
export default Todolist2导出默认 Todolist2
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.