Question

当我在地图方法中调用onChange函数时遇到以下错误

Uncaught TypeError: Cannot read property 'onCheckChange' of undefined at onChange

我的代码正在跟踪

  getPlanCheckbox(jsonParseservicelist, bbuserid) {
        const returnresult = jsonParseservicelist.map(function (single) {
          return (
            <div className="">
              <label className="" >
                <input type="checkbox" onChange={() => this.onCheckChange(bbuserid, single.plantype)} defaultChecked={single.isActive == 1 ? "checked" : ""} />
                <span className="" />
              </label>
            </div>);
        });
        return returnresult;
      }



    onCheckChange = (e, bbuid, plantype) => {
        console.log(bbuid, plantype);

      }

Answer 1

我尝试了一下，发现了2个解决方案

第一个只是将您的函数替换为以下

getPlanCheckbox(jsonParseservicelist, bbuserid) {
    var self = this;
    const returnresult = jsonParseservicelist.map(function (single) {
      return (
        <div className="">
          <label className="" >
            <input type="checkbox" onChange={() => self.onCheckChange(bbuserid, single.plantype)} defaultChecked={single.isActive == 1 ? "checked" : ""} />
            <span className="" />
          </label>
        </div>);
    });
    return returnresult;
  }

只需将this放在另一个variable内，然后用户将变量名调用函数可以说

var self = this;

现在我使用self来调用这样的函数

self.onCheckChange();

第二个是将地图用作箭头功能

data.map((single) => {
})

Answer 2

将地图函数定义为箭头，因为否则，this将不是全局上下文。如果尚未在构造函数中绑定getPlanCheckbox，则对this函数同样适用：

  getPlanCheckbox = (jsonParseservicelist, bbuserid) => {
        const returnresult = jsonParseservicelist.map((single) => {
          return (
            <div className="">
              <label className="" >
                <input type="checkbox" onChange={() => this.onCheckChange(bbuserid, single.plantype)} defaultChecked={single.isActive == 1 ? "checked" : ""} />
                <span className="" />
              </label>
            </div>);
        });
        return returnresult;
      }

反应this.onChange（）没有在map函数内部调用

2 个答案: