React Native中render方法无法渲染类变量问题求助

嗨，我来帮你捋清楚这个问题！你遇到的情况其实是React类组件的核心机制导致的：React不会追踪直接挂载在组件实例上的属性变化。

你在componentWillMount里直接给this.mail赋值，alert能立刻弹出正确的邮箱地址是因为这个操作是同步执行的，但这个赋值并没有触发组件的重新渲染。组件的render方法在初始化阶段已经执行过一次，此时this.mail还是undefined；之后你更新了this.mail，但组件完全不知道这个属性发生了变化，所以不会重新调用render，页面自然就看不到内容了。

解决方法：用state管理动态数据 #

React类组件的状态变化必须通过setState来触发，这样React才会监听状态变化并自动触发组件重新渲染。修改你的代码如下：

import Api from '../services/Api';
class Boxify extends Component {
  constructor(props) {
    super(props);
    // 初始化state，用来存储邮箱地址
    this.state = {
      mail: ''
    };
  }

  async componentWillMount() {
    const response = await Api.getUserCurrent();
    const userMail = response.data.email;
    alert(userMail);
    // 通过setState更新状态，触发组件重新渲染
    this.setState({ mail: userMail });
  }

  render() {
    return (
      <View>
        <Text>
          {this.state.mail}
        </Text>
      </View>
    )
  }
}
export default Boxify;

额外提醒：替换过时的生命周期函数 #

另外要注意，componentWillMount在React新版本中已经被标记为过时（legacy）API，推荐使用componentDidMount替代，逻辑完全一致，只是执行时机是在组件挂载完成后：

async componentDidMount() {
  const response = await Api.getUserCurrent();
  this.setState({ mail: response.data.email });
}

这样修改后，当请求完成并更新state时，组件会自动重新渲染，render里就能拿到最新的邮箱地址并显示出来啦！

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