javascript - 添加表行时 react 'this'未定义

Question

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

数据已正确发送到 Controller ，如果刷新页面，则会显示新行(因为安装后的获取请求)，但问题是表不会动态更新。

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

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]) 
      }));
    }
  });