React Hooks首次渲染setState值为undefined 子组件未重渲染问题

两个问题的核心原因 #

• 多次打印undefined：首先写useState()时没传初始值，默认就是undefined，组件第一次挂载必然先渲染初始状态，这时候请求还在pending阶段，拿不到值是符合React执行逻辑的。另外React 18开发环境开启严格模式的话，挂载阶段会重复执行一次effect，相当于发了两次重复请求，两次请求返回前打印的都是undefined，等请求返回执行setState之后就会拿到正确值，这个重复执行只在开发环境出现，生产环境不会触发。
• 子组件不重渲染：常见两种诱因，一是传了undefined进去，子组件内部如果做了默认值兜底、或者把props存成了自己的本地state，没监听后续props变化就不会更新；二是接口返回的数组是同一个引用（比如接口层做了返回结果缓存、或者直接修改原数组没有返回新数组），React靠引用变化判断更新，引用不变就不会触发重渲染。

具体修复步骤 #

• 给ordersState设置正确的初始值，数组类型就初始化为空数组[]，从根源避免传undefined给子组件。
• 请求返回后做一层浅拷贝生成新数组引用，保证React能检测到状态变化，同时加错误兜底，避免请求失败时状态异常。
• 传给子组件的chartData用useMemo做缓存，只有ordersState变化时才生成新引用，既可以避免不必要的重渲染，也能保证状态变化时引用更新能被子组件捕获。
• 可选增加加载态，避免空数据阶段图表渲染出异常样式。

修复后完整代码 #

import { useState, useCallback, useEffect, useMemo } from 'react';
import { Grid, Stack } from '@mui/material';
// 此处自行引入ChartBuilder组件、foo接口方法

export default function Orders() {
    // 初始化对应类型的初始值，不要留undefined
    const [ordersState, setOrdersState] = useState([]);
    const [loading, setLoading] = useState(false);

    const getOrders = useCallback(async () => {
        setLoading(true);
        try {
            const res = await foo();
            // 校验返回格式+浅拷贝生成新引用，避免同引用不触发更新
            setOrdersState(Array.isArray(res) ? [...res] : []);
        } catch (err) {
            console.error('获取订单数据失败：', err);
            setOrdersState([]);
        } finally {
            setLoading(false);
        }
    }, []);
    
    useEffect(() => {
        getOrders()
    }, [getOrders]);

    // 缓存传给子组件的配置，仅依赖ordersState更新
    const chartData = useMemo(() => ([
        { name: 'orders', data: ordersState },
    ]), [ordersState]);

    console.log('ordersState ', ordersState);

    return (
        <Grid item xs={12} md={12} lg={10} sx={{ mt: 3 }}>
            <Stack spacing={3}>
                {loading ? (
                    <div>订单数据加载中...</div>
                ) : (
                    <ChartBuilder
                        title="Orders"
                        chartLabels={["Jan", "Feb", "Apr."]}
                        chartData={chartData}
                    />
                )}
            </Stack>
        </Grid>
    )
}

补充排查点 #

如果按上面改完子组件还是不更新，直接检查ChartBuilder的内部实现：不要把外部传入的chartData直接赋值给组件内部useState的初始值，这种写法只会在组件首次挂载时取一次props值，后续props变化不会同步到本地state。要么直接用传入的props做渲染，要么加useEffect监听chartData变化同步更新本地状态。

整个流程完全不需要用setTimeout做延迟，React的状态更新本身就会触发渲染链路，只要保证状态引用正确、props传递链路没有问题，子组件会自动同步最新数据。

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