添加 table 行时反应 'this' 未定义

Question

我正在尝试向 table 添加一行新数据，当用户在字段中输入文本并单击按钮时会出现这种情况。单击按钮与函数 (AddNewRow) 相关联，该函数将数据发送到控制器，然后使用数据将新行添加到 table。

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

我在 AddNewRow 函数中不断收到控制台错误，提示 'this is undefined'。我试图通过使用 '.bind(this)' 和 AddNewRow() => {} 将 'this' 绑定到构造函数，但它仍然没有绑定？

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

添加 table 行时反应 'this' 未定义

React 'this' undefined when adding table row

javascript

reactjs

react-table