React中useEffect未执行排查：与.map函数相关的异常

核心问题出在certificates的初始值设置错误：你把它初始化为空字符串''，但后续要存储数组类型的证书数据。字符串没有map方法，组件首次渲染时执行certificates.map()会直接抛出TypeError，导致整个组件渲染失败——React在渲染阶段出错时，会中断后续的生命周期流程，包括挂载阶段的useEffect，所以你看不到控制台打印，API也不会触发。

修复步骤 #

1. 修正useState初始值
   把useState('')改成useState([])，空数组调用map不会报错，只是返回空结果，组件能正常完成渲染，useEffect就能正常执行了。

2. 可选：添加错误处理
   给异步函数加上try/catch，避免API调用失败导致组件崩溃，同时能排查请求问题：

const getExipringCertificates = async () => {
    console.log('running function ');
    try {
        const response = await getCertificatesExpiringInMonth();
        if(response.data.status === 200) {
            setCertificates(response.data.certificates);          
        }
    } catch (err) {
        console.error('获取证书失败:', err);
    }     
}

修正后的完整代码 #

const ExpiringCertificates = () => {
const [certificates, setCertificates] = useState([]); // 改为空数组

const getExipringCertificates = async () => {
    console.log('running function ');
    try {
        const response = await getCertificatesExpiringInMonth();
        if(response.data.status === 200)
        {
            setCertificates(response.data.certificates);          
        }
    } catch (err) {
        console.error('请求出错:', err);
    }     
}

useEffect(() => {      
    console.log('running useEffect');
    getExipringCertificates();
},[]);

return (
    <BlueBackground>
        <Container>
            <h2>
                Certificaten die binnen een maand verlopen
            </h2>
            <Table>
                <tr>
                    <th>Certificaat</th>
                    <th>Verloop datum</th>                            
                </tr>
                {certificates.map(item=>(                            
                    <tr key={item.name || item.expiryDate}> {/* 添加唯一key，避免React警告 */}
                        <td>
                            {item.name}
                        </td>
                        <td>
                            {item.expiryDate}
                        </td>
                    </tr>
                ))}
            </Table>
        </Container>
    </BlueBackground>
)
} 

另外注意：给map渲染的元素加上唯一key，符合React列表渲染规范，避免控制台警告。

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