在 ReactJs 中单击按钮时显示“无法读取未定义的属性编辑名称”

Question

我正在尝试编辑表格中的值并将其放入文本框中。当我单击编辑按钮时，它显示“无法读取未定义的属性编辑名称”。我使用了胖箭头功能。我也在构造函数中使用了绑定，但它有同样的错误。以下是我的代码。单击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>

Answer 1

我注意到（正如@DanO 所说）this不是窗口对象，而是在渲染方法中undefined使用内部地图function时。解决方案非常简单，将其更改为箭头函数（首选）或使用Function.prototype.bind.

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