Javascript 在按钮上点击，它会显示；无法读取未定义的属性编辑名称"；

我试图编辑表中的值并将其放入文本框中。当我点击编辑按钮时，它显示“无法读取未定义的属性编辑名称”。我使用了胖箭头函数。我在构造函数中也使用了bind，但它有相同的错误。下面是我的代码。当点击editName按钮时，它给出错误信息

class App extends React.Component {
  constructor(props) {
    super(props);
    this.onNameChange = this.onNameChange.bind(this);
    this.onSurnameChange = this.onSurnameChange.bind(this);
    this.onIdChange = this.onIdChange.bind(this);
    this.editName = this.editName.bind(this);
    this.state = {
      data: "",
      name: "",
      surname: "",
      id: ""
    };
  }

  componentDidMount() {
    axios.get("http://localhost:4000/employees").then((response, err) => {
      if (err) {
        console.log("err");
      }
      this.setState(prevstate => ({
        data: response.data
      }));
    });
  }
  handleSumbit(e) {
    axios
      .post("http://localhost:4000/employees", {
        name: this.state.name,
        surname: this.state.surname,
        id: this.state.id
      })
      .then((response, err) => {
        if (err) {
          console.log("Error While Posting Data", err);
        }
        console.log("RESPONSE FROM POST", response);
      });
  }
  onNameChange(e) {
    this.setState({
      name: e.target.value
    });
  }
  onSurnameChange(e) {
    this.setState({
      surname: e.target.value
    });
  }
  onIdChange(e) {
    this.setState({
      id: e.target.value
    });
  }
  editName(value) {
    this.setState({
      name: value
    });
  }
  editSurname(e, value) {
    this.setState({
      surname: value
    });
  }

  render() {
    const { data } = this.state;
    return (
      <div className="container">
        <div>
          <label className="">Name</label>
          <input
            type="text"
            name=""
            value={this.state.name}
            onChange={e => this.onNameChange(e)}
          />
        </div>
        <div>
          <label className="">Surname</label>
          <input
            type="text"
            name=""
            value={this.state.surname}
            onChange={e => this.onSurnameChange(e)}
          />
        </div>
        <div>
          <label className=""> YOUR ID </label>
          <input
            type="number"
            name=""
            value={this.state.id}
            onChange={e => this.onIdChange(e)}
          />
        </div>
        <div>
          <button type="button" onClick={e => this.handleSumbit(e)}>
            Sumbit
          </button>
        </div>

        <div className="main-container">
          {data &&
            data.map(function(data, key) {
              return (
                <React.Fragment>
                  <div className="child">
                    {data.name}
                    <button onClick={e => this.editName("Samar")}>Edit</button>
                  </div>
                  <div className="child">
                    {data.surname}
                    <button onClick={e => this.editSurname(e, data.surname)}>
                      Edit
                    </button>
                  </div>
                </React.Fragment>
              );
            })}
        </div>
      </div>
    );
  }
}

export default App;

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onNameChange=this.onNameChange.bind（this）；
this.onSurnameChange=this.onSurnameChange.bind（this）；
this.onIdChange=this.onIdChange.bind（this）；
this.editName=this.editName.bind（this）；
此.state={
数据：“，
姓名：“，
姓：“，
id:“
};
}
componentDidMount（）{
axios.get（“http://localhost:4000/employees）然后（（回答，错误）=>{
如果（错误）{
控制台日志（“err”）；
}
this.setState（prevstate=>({
数据：response.data
}));
});
}
handleSumbit（e）{
axios
.post（“http://localhost:4000/employees", {
名称：this.state.name，
姓：this.state.姓氏，
id:this.state.id
})
.然后（（响应，错误）=>{
如果（错误）{
日志（“发布数据时出错”，err）；
}
日志（“来自POST的响应”，响应）；
});
}
onNameChange（e）{
这是我的国家({
名称：e.target.value
});
}
onSurnameChange（e）{
这是我的国家({
姓氏：e.target.value
});
}
onIdChange（e）{
这是我的国家({
id:e.target.value
});
}
编辑名（值）{
这是我的国家({
名称：value
});
}
编辑姓氏（e，值）{
这是我的国家({
姓氏：value
});
}
render（）{
const{data}=this.state；
返回(
名称
this.onNameChange（e）}
/>
姓
这个.onSurnameChange（e）}
/>
你的身份证
这个.onIdChange（e）}
/>
这个.handleSumbit（e）}>
萨姆比特
{数据&&
data.map（函数（数据、键）{
返回(
{data.name}
this.editName（“Samar”）}>Edit
{数据.姓氏}
this.edit姓氏（e，data.姓氏）}>
编辑
);
})}
);
}
}
导出默认应用程序；

我注意到（正如@DanO所说）

在渲染方法中使用内部映射
函数时，此
不是一个窗口对象，而是一个
未定义的
。解决方案非常简单，要么将其更改为箭头函数（首选），要么使用
function.prototype.bind

data.map((data, key) => (<>...</>))

data.map（（数据，键）=>（…）
我注意到（正如@DanO所说）
在渲染方法中使用内部映射
函数时，此
不是一个窗口对象，而是一个
未定义的
。解决方案非常简单，要么将其更改为箭头函数（首选），要么使用
function.prototype.bind

data.map((data, key) => (<>...</>))

data.map（（数据，键）=>（…）
提供完整的错误消息我将开始检查
此
的上下文，特别是，您正在将一个匿名非胖箭头
函数
传递给
数组。映射
，这意味着您的
此
未定义。使用胖箭头函数或使用
函数。bind
@DanO，但
此
在函数表达式中不是未定义的。它只是指向另一个对象。提供完整的错误消息我将开始检查
此
的上下文，特别是，您正在将一个匿名非胖箭头
函数
传递给
数组。map
表示您的
此
未定义。使用胖箭头函数或使用
函数。bind
@DanO，但
此
在函数表达式中不是未定义的。它只是指向另一个物体。这很有趣。我永远不会想象这可以在渲染中的贴图中定义；oo有人知道为什么吗？@kinduser-“如果提供了thisArg参数，它将被用作每次调用callbackfn的this值。如果没有提供，则使用undefined。”这很有趣。我永远不会想象这可以在渲染中的贴图中定义；oo有人知道原因吗？@kinduser-“如果提供了thisArg参数，则每次调用callbackfn时都会将其用作this值。如果未提供，则改用undefined。”