React组件因setState异步致render报错，如何遍历urls数组？

核心问题 #

1. 初始状态未定义：组件构造函数里没初始化this.state，首次渲染时this.state为undefined，访问this.state.urls直接抛出"Cannot read properties of null (reading 'urls')"错误。
2. 异步状态更新时序错误：setState是异步操作，你在设置data后立即调用getUrls，此时this.state.data可能还未完成更新，会导致循环逻辑报错。
3. 渲染无加载状态处理：API请求完成前urls未生成，直接调用map会触发报错。

具体修改步骤 #

1. 初始化组件状态

在constructor里给state设置初始空数组，确保首次渲染时urls是合法的数组类型：

constructor(props){
    super (props);
    this.state = {
        data: [],
        urls: []
    };
}

2. 优化数据获取逻辑

把提取urls的逻辑直接整合到异步请求中，避免依赖异步的setState更新，同时合并状态更新操作：

getProfileData (){
    const fetchAndSetData = async () => {
        try {
            const response = await fetch('/profile/' + this.props.profileId);
            const data = await response.json();
            // 直接从返回数据提取urls，替代原for循环
            const urls = data.map(item => item.url);
            // 一次性更新state，避免异步时序问题
            this.setState({ data, urls });
        } catch (err) {
            console.error('获取数据失败:', err);
            // 请求失败时重置urls为空数组，避免渲染报错
            this.setState({ urls: [] });
        }
    }
    fetchAndSetData();
}

3. 渲染时添加加载状态（可选但推荐）

API请求完成前显示加载提示，同时修复Tab的key重复问题：

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

    // urls为空时显示加载状态
    if (urls.length === 0) {
        return <div>加载中...</div>;
    }

    return(
        <div>
            <Tabs
                defaultActiveKey="1"
                type="card"
                size="large"
                items={urls.map((url, index) => {
                    return {
                        label: `${url}`,
                        key: String(index + 1), // 保证key唯一，避免React渲染警告
                        children: `Some content for ${url}`,
                    };
                })}
            />
        </div>
    );
}

完整修改后的代码 #

import React from 'react';
import { Tabs } from 'antd';

export class TestResults extends React.Component {
    constructor(props){
        super (props);
        this.state = {
            data: [],
            urls: []
        };
    }

    getProfileData (){
        const fetchAndSetData = async () => {
            try {
                const response = await fetch('/profile/' + this.props.profileId);
                const data = await response.json();
                const urls = data.map(item => item.url);
                this.setState({ data, urls });
            } catch (err) {
                console.error('获取数据失败:', err);
                this.setState({ urls: [] });
            }
        }
        fetchAndSetData();
    }

    componentDidMount(){
        this.getProfileData();
    }

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

        if (urls.length === 0) {
            return <div>加载中...</div>;
        }

        return(
            <div>
                <Tabs
                    defaultActiveKey="1"
                    type="card"
                    size="large"
                    items={urls.map((url, index) => {
                        return {
                            label: `${url}`,
                            key: String(index + 1),
                            children: `Some content for ${url}`,
                        };
                    })}
                />
            </div>
        );
    }
} 

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