React 18+Next.js首次渲染Prop未定义二次渲染正常问题

问题背景 #

技术栈：React 18.2.0、Next.js 10.1.0、Node.js v18.12.1
异常场景：父组件初始化的空数组作为props传给子组件，首次渲染子组件时props.data为undefined，二次渲染时能正常拿到长度为0的数组。

代码片段 #

父组件与子组件代码：

default function Home() {
    console.log('executing home');
    // 省略部分代码
    let LocationsData = [];
    console.log('defined LocationsData',LocationsData.length); 
    // 省略部分代码
    return (
        <> 
            <BuildCountrieslist data={LocationsData} />
        </>
)}

function BuildCountrieslist(props){
    console.log('started BuildCountrieslist , Data.length is', props.data.length); 
}

控制台输出：

executing home     (as expected)
defined LocationsData 0 (as expected)  
started BuildCountrieslist , Data.length is undefined ( the error in question)
executing home     (as expected)
defined LocationsData 0 (as expected)
BuildCountrieslist , Data.length is 0 (as expected)

原因分析 #

1. 异步逻辑干扰：父组件省略的代码中大概率存在异步操作（比如API请求），首次渲染时LocationsData被意外赋值为undefined，或者异步逻辑的执行时机晚于子组件首次渲染。
2. 变量作用域问题：let声明的变量在组件渲染周期中可能被条件分支重新赋值，未处理边界情况导致变量变为undefined。
3. Hydration不匹配：Next.js 10.1.0与React 18的组合可能存在服务端渲染（SSR）与客户端 hydration 状态不一致的问题，导致首次客户端渲染时props丢失。

解决方案 #

1. 改用状态变量管理数据 #

用React的useState替代普通let变量，确保数据更新能触发组件正确渲染，避免变量被意外修改：

import { useState } from 'react';

default function Home() {
    console.log('executing home');
    const [locationsData, setLocationsData] = useState([]);
    console.log('defined locationsData', locationsData.length); 
    // 后续更新数据用setLocationsData
    return (
        <> 
            <BuildCountrieslist data={locationsData} />
        </>
    )
}

2. 给子组件props设置默认值 #

在子组件中对props.data设置默认值，规避undefined报错：

// 方式1：直接判断赋值
function BuildCountrieslist(props){
    const data = props.data || [];
    console.log('started BuildCountrieslist , Data.length is', data.length); 
}

// 方式2：解构赋值加默认值
function BuildCountrieslist({ data = [] }){
    console.log('started BuildCountrieslist , Data.length is', data.length); 
}

3. 排查并修复异步逻辑 #

检查父组件中的异步代码，确保初始状态始终为有效数组：

// 错误示例：未初始化变量导致undefined
// let LocationsData;
// fetch('/api/locations').then(res => res.json()).then(data => LocationsData = data);

// 正确做法：初始化为空数组，用状态更新数据
const [locationsData, setLocationsData] = useState([]);
fetch('/api/locations')
  .then(res => res.json())
  .then(data => setLocationsData(data));

4. 检查Next.js SSR/SSG配置 #

如果使用了getServerSideProps或getStaticProps，确保服务端返回的props与客户端初始状态一致，避免hydration不匹配。

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