Javascript 错误：无法读取属性'；州'；为了让前端正常工作而进行的不确定、艰难的工作

尝试从web应用程序向数据库添加输入时出现此错误。努力理解问题所在。使用要插入数据库的按钮时会出现错误。下面是一些代码：

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


class Input extends Component {
    
    constructor(props) {
        super(props);
        this.onChangeName = this.onChangeName.bind(this);
        this.onChangeQuantity = this.onChangeQuantity.bind(this);
        this.onChangePrice = this.onChangePrice.bind(this);
        this.state = {
                id: -1,
                name: null, 
                quantity: null, 
                price: null
        };
    }

    onChangeName(e) {
        this.setState({
            name: e.target.value
        });
    }

    onChangeQuantity(e) {
        this.setState({
            quantity: e.target.value
        });
    }

    onChangePrice(e) {
        this.setState({
            price: e.target.value
        });
    }

    saveProduct() {
        var data = {
            name: this.state.name, //this is the line witch get the error
            quantity: this.state.quantity,
            price: this.state.price
        };

        ProductService.addProduct(data)
        .then(response => {
            this.setState({
                id: response.data.id,
                name: response.data.name,
                quantity: response.data.quantity,
                price: response.data.price
            });
            console.log(response.data);
        })
        .catch(e => {
            console.log(e);
        });
    }

    newProduct() {
        this.setState({
            name: "",
            quantity: null,
            price: null
        });
    }
    
    render() {
      return (
          <div id="parent">
            <form>
              <p>Enter name:</p>
              <input
                type="text"
                id="name"
                required
                value={this.state.name}
                onChange={this.onChangeName}
                name="name"
              />
            </form>
            <form>
              <p>Enter price:</p>
              <input
                type="text"
                id="price"
                required
                value={this.state.price}
                onChange={this.onChangePrice}
                name="price"
              />
            </form>
            <form>
              <p>Enter quantity:</p>
              <input
                type="text"
                id="quantity"
                required
                value={this.state.quantity}
                onChange={this.onChangeQuantity}
                name="quantity"
              />
            </form>
            <button onClick={this.saveProduct}>Enter in database</button>
          </div>
        );
    }
}

export default Input;

---

一切正常。我试过不同的方法，但对我来说，这个错误没有什么意义。有人知道我的错误在哪里吗？提前谢谢。

this的属性并不总是相同的。 而不是使用此.property。例如，创建一个全局对象（_this）并在其中保存数据，这样您就可以在所有函数中使用变量和属性

例如：

saveProduct() {
            var data = {
                name: "test",
                quantity: 123,
                price: 456
            };

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


class Input extends Component {

let _this = {};

constructor(props) {
    super(props);
    _this.onChangeName = _this.onChangeName.bind(_this);
    _this.onChangeQuantity = _this.onChangeQuantity.bind(_this);
    _this.onChangePrice = _this.onChangePrice.bind(_this);
    _this.state = {
            id: -1,
            name: null, 
            quantity: null, 
            price: null
    };
}

onChangeName(e) {
    _this.setState({
        name: e.target.value
    });
}

onChangeQuantity(e) {
    _this.setState({
        quantity: e.target.value
    });
}

onChangePrice(e) {
    _this.setState({
        price: e.target.value
    });
}

saveProduct() {
    var data = {
        name: _this.state.name, //this is the line witch get the error
        quantity: _this.state.quantity,
        price: _this.state.price
    };

    ProductService.addProduct(data)
    .then(response => {
        _this.setState({
            id: response.data.id,
            name: response.data.name,
            quantity: response.data.quantity,
            price: response.data.price
        });
        console.log(response.data);
    })
    .catch(e => {
        console.log(e);
    });
}

newProduct() {
    _this.setState({
        name: "",
        quantity: null,
        price: null
    });
}

render() {
  return (
      <div id="parent">
        <form>
          <p>Enter name:</p>
          <input
            type="text"
            id="name"
            required
            value={_this.state.name}
            onChange={_this.onChangeName}
            name="name"
          />
        </form>
        <form>
          <p>Enter price:</p>
          <input
            type="text"
            id="price"
            required
            value={_this.state.price}
            onChange={_this.onChangePrice}
            name="price"
          />
        </form>
        <form>
          <p>Enter quantity:</p>
          <input
            type="text"
            id="quantity"
            required
            value={_this.state.quantity}
            onChange={_this.onChangeQuantity}
            name="quantity"
          />
        </form>
        <button onClick={_this.saveProduct}>Enter in database</button>
      </div>
    );
}
}

export default Input;

import React，{Component}来自'React'；
从“./ProductService”导入ProductService；
类输入扩展组件{
让_this={}；
建造师（道具）{
超级（道具）；
_this.onChangeName=\u this.onChangeName.bind（\u this）；
_this.onChangeQuantity=\u this.onChangeQuantity.bind（\u this）；
_this.onChangePrice=\u this.onChangePrice.bind（\u this）；
_此.state={
id:-1，
名称：空，
数量：空，
价格：零
};
}
onChangeName（e）{
_这是我的国家({
名称：e.target.value
});
}
变更数量（e）{
_这是我的国家({
数量：即目标值
});
}
更改价格（e）{
_这是我的国家({
价格：即目标价值
});
}
saveProduct（）{
风险值数据={
name:_this.state.name，//这是获取错误的行
数量：_this.state.quantity，
价格：_this.state.price
};
ProductService.addProduct（数据）
。然后（响应=>{
_这是我的国家({
id:response.data.id，
名称：response.data.name，
数量：response.data.quantity，
价格：response.data.price
});
console.log（response.data）；
})
.catch（e=>{
控制台日志（e）；
});
}
新产品（）{
_这是我的国家({
姓名：“，
数量：空，
价格：零
});
}
render（）{
返回(
输入名称：

输入价格：

输入数量：

进入数据库
);
}
}
导出默认输入；

您忘记为saveProduct（）设置绑定。

---

签出我的最小工作示例：

问题在于绑定此示例。正如ReactJS文档所述：

在JSX回调中，您必须小心这一点的含义。在里面 默认情况下，类方法不受绑定。如果你忘了 绑定this.handleClick并将其传递给onClick，这将是未定义的 当函数实际被调用时

在构造函数中，只需添加以下行，您的代码即可工作：

constructor(props) {
    ...
    // This binding is necessary to make `this` work in the callback
    this.saveProduct = this.saveProduct.bind(this);
}

---

对所有事件处理程序执行此操作。也请阅读文档：

我同意@tretechs arrow函数使用他们周围的

上下文。这就是为什么我们需要绑定当前this并将其传递给函数的原因<代码>这是一个复杂的主题，尽管我知道我选择避免这种情况，并出于或多或少相同的原因转到功能组件。
将saveProduct用作箭头函数。问题在于，在当前场景中，函数没有获取类上下文