PowerPoint JS API提取选中形状文本时React状态未更新问题

核心问题是回调函数内this指向丢失，和Office JS接口返回值无关：

• 你传入getSelectedDataAsync的是普通function定义的回调，Office JS执行该回调时，回调内部的this不会指向当前React组件实例，此时调用this.setState本质没有触发组件实例的状态更新方法，自然不会驱动视图重渲染。你在Script Lab测试时仅做控制台打印，不依赖this访问组件，所以能正常拿到返回值。
• insertText方法能正常运行，是因为该方法本身为箭头函数定义，外层读取this.state.editor时this指向组件实例是正确的，且其内部回调仅调用外部的showNotification方法，不依赖回调内的this访问组件属性，因此不会触发指向问题。

两种方案都可以解决指向问题，优先推荐第一种：

方案1：将回调改为箭头函数 #

箭头函数不会绑定自身this，会继承外层作用域（即组件实例）的this指向，修改后代码如下：

getData = () => {
  Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, (asyncResult) => {
    if (asyncResult.status == Office.AsyncResultStatus.Failed) {
      this.setState({ editor: asyncResult.error.message});
    } else {
      this.setState({ editor: asyncResult.value });
    }
  });
};

getSlideMetadata = () => {
  Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, (asyncResult) => {
    if (asyncResult.status === Office.AsyncResultStatus.Failed) {
      console.error(asyncResult.error.message);
    } else {
      this.setState({ selectedText: JSON.stringify(asyncResult.value, null, 4) });
    }
  });
};

同时建议把insertText内的回调也改成箭头函数，避免后续在回调里加组件状态操作时再出现同类问题。

方案2：提前缓存组件实例引用 #

如果不想修改回调写法，可以在进入回调前提前将组件实例的this存到变量中，回调内通过该变量调用setState：

getSlideMetadata = () => {
  const self = this;
  Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, function (asyncResult) {
    if (asyncResult.status === Office.AsyncResultStatus.Failed) {
      console.error(asyncResult.error.message);
    } else {
      self.setState({ selectedText: JSON.stringify(asyncResult.value, null, 4) });
    }
  });
};

修改完成后，setState就能正确触发组件状态更新，绑定对应状态的文本区域会正常同步内容。

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