Javascript TypeError:无法读取属性'；名称'；未定义的反应错误

每次我尝试在输入字段中键入内容时，我都无法在代码中找到解决此错误的方法。TypeError:无法读取未定义的属性“name”

我是新来的，对反应不太了解

这是我文件中的所有代码

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 = (e) => {
        const { note } = this.state;

        this.setState({
            note: { ...note, "title": e.target.value }
        });
    }

---

updateValue方法中的参数e是事件对象，它将没有名为title.name的属性。如果要将title文本框的值存储到note对象的属性title中 所以你的代码可以是这样的

this.setState({
      note: { ...note, title: e.target.value }
    });

---

事件

对象（e）没有名为

标题

的键，这就是为什么会出现“无法读取未定义的属性名”

您需要

event.target

，它是指导致此事件发生的元素

尝试以下操作以动态更新

状态值

。它将找到一个与元素的

名称

匹配的键，并为其提供该元素的值（如用户输入）：

---

从“React”导入React，{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>
    )
}

state={name:''，items:''，price:''，arr:[]，错误：{name:''，items:''，price:''}
todoSubmit=（事件）=>
{
event.preventDefault（）
让list=this.state.arr；
让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）；
}
句柄=（事件）=>
{
常量{name，value}=event.target；
让errors=this.state.error；
开关（错误）
{
案例“name”：errors.name=value.length0&&{errors.items}
价格：
{errors.price.length>0&&{errors.price}
序号
名称
项目
价格
行动
{this.state.arr.map（（数据，ind）=>
{ind+1}
{data.name}
{data.items}
{data.price}
this.deldata（ind）}>delete
)}
)
}

}

---

将默认值导出到olist2

您好，请尝试下面的解决方案，如果有帮助，请告诉我：）非常感谢您的解释和帮助。你的解决方案奏效了！再次感谢@丁斯帕塔伊，不客气！我很高兴这对您有所帮助：）

updateValue = (e) => {
    const { note } = this.state;

    this.setState({
        note: { ...note, [e.target.name]: e.target.value }
    });
}

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>
    )
}