React Native中如何在函数返回uniqueId并展示在页面上

你遇到的核心问题是**uniqueId是异步操作**，回调函数里的return id并不会作为gettac()的返回值——因为异步代码执行的时候，gettac()已经先执行完了，默认返回undefined，所以<Text>{this.gettac()}</Text>自然显示不出内容。

正确的做法是用组件的state来存储这个异步获取到的id，因为React类组件的UI渲染会跟随state的更新而刷新。具体步骤如下：

1. 初始化state存储id
   在组件的构造函数里添加一个用于保存id的state字段：

   constructor(props) {
     super(props);
     this.state = {
       tacId: '' // 初始值为空字符串
     };
   }
   

2. 修改gettac函数，更新state
   把原本回调里的return id改成用this.setState把id存入state：

   gettac = () => {
     uniqueId((error, id) => {
       if (error) {
         console.error(error);
         return;
       }
       console.log(id);
       // 将获取到的id更新到state中
       this.setState({ tacId: id });
     });
   }
   

3. 在组件挂载时调用gettac
   利用componentDidMount生命周期钩子，确保组件挂载后执行异步获取操作：

   componentDidMount() {
     this.gettac();
   }
   

4. 渲染state中的id
   最后在render方法里直接使用state中的tacId：

   render() {
     return (
       <Text>{this.state.tacId}</Text>
     );
   }
   

这样当异步操作完成、id被存入state后，组件会自动重新渲染，就能把id展示在页面上了。

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