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

我正在尝试从表中编辑值并将其放在文本框中。当我单击编辑按钮时，它显示“无法读取未定义的属性编辑名称”。我使用了胖箭头功能。我还在构造函数中使用了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;

最佳答案

我已经注意到（如@DanO所说），在渲染方法中使用内部贴图this时，undefined不再是窗口对象，而是function。解决方案非常简单，可以将其更改为箭头功能（首选），也可以使用Function.prototype.bind。

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