React技术问题：如何在render中访问componentDidMount赋值的变量

兄弟，我帮你梳理下代码里的几个问题，一步步来解决：

1. State未初始化导致的初始undefined #

你的组件没有初始化state，所以在componentDidMount执行之前（也就是第一次render的时候），this.state本身就是undefined，自然this.state.componentData也会是undefined。

修复方法：在组件构造函数里初始化state：

class MobileBanner extends React.PureComponent {
  constructor(props) {
    super(props);
    // 初始化state，给componentData一个默认值（比如null）
    this.state = {
      componentData: null
    };
  }

  // ...后续代码
}

2. Render方法里的dhome变量未定义 #

你在render里写了typeof dhome === 'undefined'，但代码里根本没定义过dhome变量，这会直接导致这个判断永远为true，所以displayData会一直是'undefined'，这肯定不是你想要的。

修复方法：把判断改成针对this.state.componentData：

render () {
  // 解构state里的componentData，更简洁
  const { componentData } = this.state;
  // 先判断componentData是否存在，再用isEmpty检查
  const displayData = componentData && !isEmpty(componentData) ? componentData : 'undefined';
  
  // 这里返回你的JSX，比如：
  return <div>{displayData}</div>;
}

3. Window对象值的加载时机问题 #

有可能在componentDidMount执行时，window.something或者window.something.banner还没被加载（比如它是异步加载的脚本注入的），这时候你取到的就是undefined，setState之后state里的值也还是undefined。

修复方法：增加存在性判断，或者轮询等待值加载完成：

componentDidMount(){
  // 先检查window.something和banner是否存在
  if (window.something?.banner) {
    this.setState({ componentData: window.something.banner });
  } else {
    // 如果是异步加载的，用定时器轮询检查，直到值出现
    const checkBanner = setInterval(() => {
      if (window.something?.banner) {
        this.setState({ componentData: window.something.banner });
        clearInterval(checkBanner);
      }
    }, 100); // 每100ms检查一次，可根据实际调整
    
    // 记得在组件卸载时清除定时器，避免内存泄漏
    this.bannerCheckInterval = checkBanner;
  }
}

// 组件卸载时清理定时器
componentWillUnmount() {
  if (this.bannerCheckInterval) {
    clearInterval(this.bannerCheckInterval);
  }
}

额外注意：isEmpty函数的可靠性 #

确保你用的isEmpty函数是正确的（比如lodash的_.isEmpty），如果是自己实现的，要测试它对不同类型值的判断（比如null、undefined、空对象/数组），避免误判导致逻辑出错。

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