React添加表格行时'this'未定义及动态更新失效问题

看起来你遇到了React组件里状态更新不生效、this指向混乱的典型问题，咱们一步步拆解修复：

1. 先搞定this未定义的核心问题 #

你虽然尝试绑定了AddNewRow的this，但axios的then回调用了普通函数，这里的this会脱离React组件上下文，变成undefined（严格模式下）。有两种简单解决方式：

方式一：把then回调改成箭头函数 #

箭头函数会自动继承外部的this（也就是组件实例）：

AddNewRow(){
  axios.post('/Controller/CreateJob', { Name: this.refs.NewJobName.value})
    .then((response) => { // 这里改成箭头函数
      if(response.data.Error) {
        window.alert(response.data.Error); // 注意要取data里的Error，不然alert的是整个response对象
      } else {
        // 后续更新state的代码咱们下面再改
      }
    })
}

方式二：提前保存组件的this引用 #

AddNewRow(){
  const self = this; // 先把组件的this存起来
  axios.post('/Controller/CreateJob', { Name: this.refs.NewJobName.value})
    .then(function(response){
      if(response.data.Error) {
        window.alert(response.data.Error);
      } else {
        // 这里用self代替this就行
        const newTableData = [...self.state.tableData, response.data];
        self.setState({ tableData: newTableData });
      }
    })
}

2. 修复state更新不生效的问题 #

React的state是不可变的，你直接修改原数组的写法（this.state.tableData.push(response)）不会触发组件重新渲染——因为React只会检测state引用的变化，而你修改的是同一个数组引用。正确的做法是创建新数组：

// 错误写法（直接修改原state）：
// var data = this.state.tableData;
// data.push(response);
// this.setState({ tableData: data });

// 正确写法（创建新数组）：
const newTableData = [...this.state.tableData, response.data]; // 展开原数组，添加新数据
this.setState({ tableData: newTableData });

这里注意：后端返回的新行数据应该是response.data，而不是整个response对象，要和你GET请求返回的单条数据格式保持一致。

3. 优化：替换过时的字符串ref #

你现在用的this.refs.NewJobName是React已经不推荐的字符串ref方式，类组件里更推荐用createRef：

步骤1：在构造器里创建ref #

constructor() {
  super();
  this.state = {
    tableData: [], // 初始化空数组就行，不用放空对象
  };
  this.newJobNameRef = React.createRef(); // 创建ref实例
}

步骤2：绑定到input元素 #

<input ref={this.newJobNameRef} type="text" placeholder="Name" />

步骤3：获取输入值 #

// 替换原来的this.refs.NewJobName.value
Name: this.newJobNameRef.current.value

4. 整合后的完整代码 #

把这些改动整合后，完整代码如下：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      tableData: [],
    };
    this.newJobNameRef = React.createRef();
    // 提前绑定AddNewRow的this，避免后续问题
    this.AddNewRow = this.AddNewRow.bind(this);
  }

  componentDidMount() {
    axios.get('/Jobs/GetJobs', { responseType: 'json' })
      .then(response => {
        this.setState({ tableData: response.data }); // 这里也要确认是response.data还是response
      });
  }

  AddNewRow() {
    const jobName = this.newJobNameRef.current.value;
    if (!jobName) { // 加个简单的非空校验
      window.alert('请输入Job名称');
      return;
    }

    axios.post('/Controller/CreateJob', { Name: jobName })
      .then((response) => {
        if (response.data.Error) {
          window.alert(response.data.Error);
        } else {
          // 创建新数组更新state
          const newTableData = [...this.state.tableData, response.data];
          this.setState({ tableData: newTableData });
          // 清空输入框提升体验
          this.newJobNameRef.current.value = '';
        }
      })
      .catch(error => { // 别忘了捕获请求错误
        console.error('创建Job失败:', error);
        window.alert('请求失败，请稍后重试');
      });
  }

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

最后检查要点 #

• 确认后端/Controller/CreateJob返回的新数据格式，和/Jobs/GetJobs返回的单条数据格式完全一致，这样ReactTable才能正确渲染。
• 确保ReactTable组件会监听data属性的变化并重新渲染（绝大多数现成表格组件都支持这点）。

内容的提问来源于stack exchange，提问作者Whirlwind991