javascript - 添加表格行时反应“this”未定义

Question

我正在尝试将新的数据行添加到当用户在字段中输入文本并单击按钮时发生的表中。按钮单击与一个函数 (AddNewRow) 相关联，该函数将数据发送到控制器，然后将新行添加到包含数据的表中。

数据正确发送到控制器，如果刷新页面，则显示新行（因为挂载后的 get 请求），但问题是表没有动态更新。

我在 AddNewRow 函数中不断收到控制台错误消息“这是未定义的”。我试图通过使用两者来将“this”绑定到构造函数'.bind(this)'，AddNewRow() => {}但它仍然没有绑定？

class App extends React.Component {
constructor() {
    super();

    this.state = {
        tableData: [{            
        }],         
    };       
  }  

   componentDidMount() {
    axios.get('/Jobs/GetJobs', {
        responseType: 'json'
    }).then(response => {        
        this.setState({ tableData: response });
    });
}

AddNewRow(){

    axios.post('/Controller/CreateJob', { Name: this.refs.NewJobName.value})
        .then(function (response){               
            if(response.data.Error) {                   
                window.alert(response);
            }
        else {
                var data = this.setState.tableData;
                this.setState.tableData.push(response);
                this.setState({ tableData: data });
            }
        })}

    render() {
    const { tableData } = this.state;
    return (
        <div>
        <button onClick={() => this.AddNewRow()} >ADD</button>
        <input ref="NewJobName" type="text" placeholder="Name" />
        <ReactTable 
        data={tableData}
         /> 
        </div>
       )
    }

Answer 1

使用箭头函数使函数中this可用then：

axios
  .post('/Controller/CreateJob', { Name: this.refs.NewJobName.value })
  .then((response) => {
    if (response.data.Error) {
      window.alert(response);
    } else {
      this.setState(prevState => ({ 
        tableData: prevState.tableData.concat([response]) 
      }));
    }
  });