React组件加载内容后无法正确更新显示值的问题

你遇到的核心问题是直接修改React状态导致的异步更新冲突，再加上闭包作用域的影响，才让ReactComp始终停留在第一次加载的文本内容上。咱们一步步拆解问题并修复：

问题根源 #

1. 直接操作this.state违反规则：你在代码里直接执行this.state.myTexts = []和this.state.myTexts.push(...)——React的状态是不可变的，直接修改不会触发组件重新渲染，后续读取this.state.myTexts时拿到的很可能还是旧的状态引用。
2. 异步状态更新的时序问题：setState是异步操作，当你在transform函数里读取this.state.myTexts时，这个状态可能还没完成更新，导致复用了之前的旧数据。
3. i变量的作用域隐患：虽然每次loadContents都重置了i=0，但如果状态更新的异步性导致多次转换操作重叠，很容易出现计数混乱的情况。

修复步骤 #

1. 用局部变量收集文本，不碰state：先创建一个局部数组存储提取到的文本，完全避开异步状态更新的坑。
2. 在transform里直接用局部数组：因为文本收集和HTML转换在同一个then回调里，用局部数组能保证拿到当前请求的最新数据。
3. 移除多余的myTexts状态：既然这个数组不需要在组件其他地方复用，用局部变量替代更高效，还能减少state的复杂度。

修改后的完整代码 #

handleClickLink(event) {
  const simpleHttpRegex = new RegExp(`https?://[a-zA-z0-9:_.]+(/.*)`);
  var match = simpleHttpRegex.exec(event.target.href);
  if (match != null) {
    event.stopPropagation();
    event.preventDefault();
    this.loadContents(match[1], true);
  } else {
    console.log('Regular expression did not match url');
  }
}

loadContents(url) {
  fetch(url)
    .then(response => response.text())
    .then((responseBody) => {
      const parser = new DOMParser();
      const dom = parser.parseFromString(responseBody, "text/html");
      const content = dom.getElementById('content');
      
      // 用局部数组收集文本，避开state异步更新问题
      const collectedTexts = [];
      const preTags = Array.from(content.getElementsByTagName('pre'));
      preTags.forEach((v) => {
        if (v.classList.contains('someclass')) {
          collectedTexts.push(v.innerText);
        }
      });

      const serializedContent = (new XMLSerializer()).serializeToString(content);
      let i = 0;

      const replaceDivs = (node, index) => {
        if (node.type === 'tag' && node.name === 'div' && node.attribs?.class === 'someclass2') {
          // 直接使用当前请求的局部文本数组
          const myText = collectedTexts[i];
          i++;
          return <ReactComp key={'comp' + i.toString()} text={myText} />;
        }
        return undefined;
      };

      const componentFromResponse = ReactHtmlParser(serializedContent, {transform: replaceDivs});
      
      // 最后统一更新页面内容状态
      this.setState({ pageContents: componentFromResponse });
    })
    .catch(err => console.error('加载内容失败:', err)); // 建议加上错误处理，方便排查问题
}

关键注意点 #

• 永远不要直接修改this.state：所有状态更新必须通过setState方法，React才能感知变化并触发组件重新渲染。
• 临时数据优先用局部变量：如果数据不需要在组件渲染周期中共享，用局部变量比state更高效，还能避免异步更新带来的时序问题。
• 确保transform函数拿到最新数据：利用同一个回调函数的作用域，让转换逻辑直接访问当前请求的文本数组，杜绝过期数据的干扰。

这样修改后，每次调用loadContents都会重新收集对应页面的文本，ReactComp就能正确显示当前加载页面的内容了。

内容的提问来源于stack exchange，提问作者Germán Diago