React Native渲染流程困惑：children未定义报错问题求助

核心原因 #

组件第一次渲染时，person是你初始化的空对象{}，这时候person.children是undefined，直接访问undefined.length自然会抛出"children未定义"的错误。而person.name只是返回undefined，React会把这个值渲染成空内容，不会触发报错。

React的渲染逻辑是：组件挂载后先执行初始渲染（用useState的初始空对象），之后useEffect才会启动异步请求，等请求完成更新person状态后，才会触发第二次渲染——这时候children才存在，但第一次渲染的报错已经提前发生了。

解决方案 #

这里有几种实用的处理方式：

1. 用可选链操作符（最简洁） #

通过?.安全访问嵌套属性，当person.children不存在时会返回undefined，不会报错：

{person.children?.length}

2. 条件渲染判断 #

先确认person.children存在，再渲染它的长度：

{person.children && person.children.length}

3. 初始化时给children设默认值 #

把useState的初始值改成包含空数组的对象，这样第一次渲染时person.children就是空数组，访问length不会有问题：

const [person, setPerson] = useState({ children: [] });

4. 增加加载状态判断 #

如果想在数据加载完成前显示加载提示，可以加个加载状态：

const [person, setPerson] = useState({});
const [loading, setLoading] = useState(true);

useEffect(() => {
  const fetchData = async () => {
    const data = await getPeople();
    setPerson(data);
    setLoading(false);
  };
  fetchData();
}, []);

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

return (
  <View>
    <Text>{person.name}</Text>
    <Text>{person.children.length}</Text>
  </View>
);

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