Question

TypeError：无法读取未定义的反应错误的属性“名称”

2019-08-16

3938

javascript reactjs

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

我是 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>
        );
    }
}

这是我收到的完整错误：

TypeError：无法读取未定义的属性“名称” 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 |

查看已编译

Answer 1

event 对象 (e) 没有名为 title 的键，这就是您收到“无法读取未定义的属性名称”的原因。

您需要 event.target ，它指的是导致此事件发生的元素。

尝试以下操作以动态更新 state-value 。它将找到与元素的 name 匹配的键，并为其提供到达该元素的值（如用户输入）：

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

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

Answer 2

我相信您正在尝试将 title 指定为键，并将输入字段的值指定为值。您为什么不试试这个？

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

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

Answer 3

updateValue方法中的参数是事件对象，它不会有title.name属性。如果你想将title文本框的值存储到note对象的title属性中那么你的代码可以像这样

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