React Native渲染前数据不可用：如何在render前执行JS函数？

这种情况太常见了——组件的render方法会在你的数据还没从数据库拉回来的时候就执行，这时候data根本还没被赋值，自然会出问题。给你几个实用的解决方案，都是日常开发里常用的：

1. 初始化默认值 + 条件渲染 #

不管你用类组件还是函数组件，先给data设置一个初始值（比如null或者空数组），然后在渲染的时候判断数据是否已经加载完成，没加载好就显示加载提示，加载完成再渲染真实内容。

类组件示例： #

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class DataDisplayComponent extends Component {
  constructor(props) {
    super(props);
    // 初始化state，给data一个默认值
    this.state = {
      data: null,
    };
  }

  // 组件挂载后再拉取数据，这是React推荐的时机
  componentDidMount() {
    this.fetchDataFromDB();
  }

  // 模拟从数据库获取数据的异步函数
  fetchDataFromDB = async () => {
    // 这里替换成你真实的数据库请求逻辑
    const fetchedData = await new Promise(resolve => {
      setTimeout(() => resolve('从数据库拿到的内容'), 1000);
    });
    // 更新state，触发重新渲染
    this.setState({ data: fetchedData });
  };

  render() {
    const { data } = this.state;

    // 如果data还没准备好，显示加载提示
    if (!data) {
      return <View><Text>加载中...</Text></View>;
    }

    // 数据就绪后渲染内容
    return <View><Text>{data}</Text></View>;
  }
}

export default DataDisplayComponent;

函数组件示例（用Hooks）： #

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

const DataDisplayComponent = () => {
  // 用useState初始化data的默认值
  const [data, setData] = useState(null);

  // 用useEffect模拟组件挂载后拉取数据
  useEffect(() => {
    const fetchDataFromDB = async () => {
      const fetchedData = await new Promise(resolve => {
        setTimeout(() => resolve('从数据库拿到的内容'), 1000);
      });
      setData(fetchedData);
    };

    fetchDataFromDB();
  }, []); // 空数组依赖确保只执行一次

  // 条件渲染
  if (!data) {
    return <View><Text>加载中...</Text></View>;
  }

  return <View><Text>{data}</Text></View>;
};

export default DataDisplayComponent;

2. 用加载状态变量控制渲染 #

如果你的场景更复杂（比如需要处理加载失败的情况），可以单独加一个isLoading状态，逻辑会更清晰：

// 函数组件示例
const DataDisplayComponent = () => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchDataFromDB = async () => {
      try {
        const fetchedData = await new Promise(resolve => {
          setTimeout(() => resolve('从数据库拿到的内容'), 1000);
        });
        setData(fetchedData);
      } catch (err) {
        setError('加载失败，请重试');
      } finally {
        setIsLoading(false); // 不管成功失败，都结束加载状态
      }
    };

    fetchDataFromDB();
  }, []);

  if (isLoading) {
    return <View><Text>加载中...</Text></View>;
  }

  if (error) {
    return <View><Text>{error}</Text></View>;
  }

  return <View><Text>{data}</Text></View>;
};

3. 可选链操作符（针对复杂数据结构） #

如果data是对象或者数组，比如你要渲染data.user.name，可以用可选链data?.user?.name来避免因为某个层级未定义而报错，但这个只是辅助手段，还是要配合前面的条件渲染，不然空数据的时候会显示undefined。

核心思路就是永远不要在数据未就绪的时候渲染依赖它的UI，通过初始值、状态判断来控制渲染流程，就能解决这个问题啦～

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