当前位置: 首页 > 知识库问答 >
问题:

与ES7反应:未捕获的TypeError:无法读取未定义的[duplicate]的属性“state”

严正诚
2023-03-14

我在AuthorForm的输入框中键入任何内容时,都无法读取undefined的属性“state”。我正在使用React with ES7。

错误发生在ManageAuthorPage中setAuthorState函数的第3行。不管那行代码是什么,即使我在setAuthorState中放置了console.log(this.state.author),它也会在console.log处停止并调用错误。

在internet上找不到其他人的类似问题。

以下是ManageAuthorPage代码:

import React, { Component } from 'react';
import AuthorForm from './authorForm';

class ManageAuthorPage extends Component {
  state = {
    author: { id: '', firstName: '', lastName: '' }
  };

  setAuthorState(event) {
    let field = event.target.name;
    let value = event.target.value;
    this.state.author[field] = value;
    return this.setState({author: this.state.author});
  };

  render() {
    return (
      <AuthorForm
        author={this.state.author}
        onChange={this.setAuthorState}
      />
    );
  }
}

export default ManageAuthorPage 

以下是AuthorForm代码:

import React, { Component } from 'react';

class AuthorForm extends Component {
  render() {
    return (
      <form>
                <h1>Manage Author</h1>
        <label htmlFor="firstName">First Name</label>
                <input type="text"
                    name="firstName"
          className="form-control"
                    placeholder="First Name"
          ref="firstName"
          onChange={this.props.onChange}
                    value={this.props.author.firstName}
          />
        <br />

        <label htmlFor="lastName">Last Name</label>
                <input type="text"
                    name="lastName"
          className="form-control"
                    placeholder="Last Name"
          ref="lastName"
                    onChange={this.props.onChange}
          value={this.props.author.lastName}
                    />

                <input type="submit" value="Save" className="btn btn-default" />
            </form>
    );
  }
}

export default AuthorForm

共有2个答案

伯庆
2023-03-14

确保在构造函数中首先调用Super()

您应该为setAuthorState方法设置this

class ManageAuthorPage extends Component {

  state = {
    author: { id: '', firstName: '', lastName: '' }
  };

  constructor(props) {
    super(props);
    this.handleAuthorChange = this.handleAuthorChange.bind(this);
  } 

  handleAuthorChange(event) {
    let {name: fieldName, value} = event.target;

    this.setState({
      [fieldName]: value
    });
  };

  render() {
    return (
      <AuthorForm
        author={this.state.author}
        onChange={this.handleAuthorChange}
      />
    );
  }
}

另一种基于箭头功能的替代方法

class ManageAuthorPage extends Component {

  state = {
    author: { id: '', firstName: '', lastName: '' }
  };

  handleAuthorChange = (event) => {
    const {name: fieldName, value} = event.target;

    this.setState({
      [fieldName]: value
    });
  };

  render() {
    return (
      <AuthorForm
        author={this.state.author}
        onChange={this.handleAuthorChange}
      />
    );
  }
}
宇文兴言
2023-03-14

您必须将事件处理程序绑定到正确的上下文(this):

onChange={this.setAuthorState.bind(this)}
 类似资料:
  • 问题内容: 我收到此错误 Uncaught TypeError: 每当我在AuthorForm的输入框中键入任何内容时,都 无法读取未定义的属性“ state” 。我在ES7中使用React。 该错误发生 在ManageAuthorPage中的setAuthorState函数的第三行 。无论哪行代码,即使我将console.log(this.state.author)放在setAuthorStat

  • 问题内容: 我收到以下错误 未捕获的TypeError:无法读取未定义的属性’setState’ 即使在构造函数中绑定了delta之后。 问题答案: 这是由于不受约束。 为了绑定设置在构造函数中: 当前,您正在调用绑定。但是bind返回一个绑定函数。您需要将函数设置为其绑定值。

  • 此错误消息由以下代码引起: 从文件中:https://github.com/koenpunt/chosen/edit/master/chosen/chosen.jquery.js 显然,浏览器没有定义。你知道是什么引起的吗。Chrome和FF中存在相同的错误。

  • 问题内容: 如果这个问题已经回答,我深表歉意。我尝试搜索解决方案,但找不到适合我的代码的任何解决方案。我还是jQuery新手。 对于两个不同的页面,我有两种不同类型的粘滞菜单。这是两者的代码。 我的问题是,底部粘性菜单的代码不起作用,因为第二行代码会引发错误,提示“未捕获的TypeError:无法读取未定义的属性’top’”。实际上,除非将第二行以下的其他jQuery代码放在第二行之上,否则根本不

  • 问题内容: 我收到此错误,它源自jquery框架。当我尝试在文档准备好加载选择列表时,出现此错误。我似乎找不到我为什么收到此错误的信息。 它适用于change事件,但是尝试手动执行功能时出现错误。 未捕获的TypeError:无法读取未定义的属性’toLowerCase’-> jquery-2.1.1.js:7300 这是代码 问题答案: 当您调用DOMReady时,的上下文将不是元素。 您可以通

  • 问题内容: 我有一些JavaScript代码会给出此错误 码 这个错误是什么意思? 问题答案: 好像您的值之一,属性键为“值”是未定义的。在执行if语句之前测试,和是否已定义: