React组件componentDidMount中fetch响应赋值setState及传参问题

你的代码存在几个关键问题导致报错，逐一分析并给出修复方案：

问题分析 #

1. 未初始化State：构造函数中没有设置初始state，导致this.state初始为undefined，调用this.state.data时触发Cannot read properties of null (reading 'data')错误。
2. 错误处理response.json()：response.json()返回的是Promise对象，而非直接的JSON数据，直接赋值给state.data会导致后续无法读取数组长度。
3. setState异步特性误用：连续调用两次setState，且在setState后立即调用依赖state的getUrls，此时state尚未更新，依然会读到初始的空值。
4. 未处理数据加载状态：数据还未返回时就尝试渲染Tabs组件，可能导致不必要的错误。

修复后的完整代码 #

import ReactDOM from 'react-dom';
import { Tabs } from 'antd';
import { ResultsDashboard } from './ResultsDashboard.js'

export class TestResults extends React.Component {
    constructor(props){
        super(props);
        // 初始化state，避免初始访问时报错
        this.state = {
            data: [],
            urls: []
        };
    }

    getProfileData() {
        const profileId = window.location.href.split('/')[4];
        console.log(`Making a fetch for URL /profile/${profileId}`);
        
        fetch(`/profile/${profileId}`)
            .then(response => {
                // 检查接口响应是否成功
                if (!response.ok) {
                    throw new Error(`请求失败，状态码：${response.status}`);
                }
                return response.json(); // 解析JSON数据，返回Promise
            })
            .then(jsonData => {
                console.log("接口返回数据 => ", jsonData);
                // 直接基于返回数据生成urls，无需依赖state
                const urls = jsonData.map(item => item.url);
                // 合并更新state，减少重渲染次数
                this.setState({
                    data: jsonData,
                    urls: urls
                });
            })
            .catch(error => {
                // 捕获请求过程中的错误（网络问题、接口报错等）
                console.error("数据请求失败：", error);
            });
    }

    componentDidMount() {
        this.getProfileData();
    }

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

        // 数据未加载完成时显示加载提示
        if (data.length === 0) {
            return <div>加载中...</div>;
        }

        return (
            <div>
                <Tabs
                    defaultActiveKey="1"
                    type="card"
                    size="large"
                    items={urls.map((url, index) => ({
                        label: `${url.substr(0,75)}`,
                        key: index.toString(), // 将key转为字符串，符合组件要求
                        children: <ResultsDashboard testIndex={index} aggregateData={data} />
                    }))}
                />
            </div>
        );
    }
}

关键改动说明 #

• 初始化State：在构造函数中为data和urls设置空数组初始值，从根源避免初始访问state时的空值错误。
• 正确处理异步请求：通过链式then等待response.json()解析完成，拿到实际的JSON数据后再更新state，同时添加错误捕获逻辑，避免请求失败导致程序崩溃。
• 合并State更新：直接基于接口返回的数据计算urls，一次调用setState完成两个状态的更新，既提升性能，又避免了异步更新带来的状态不同步问题。
• 添加加载状态：在render阶段判断数据是否加载完成，显示加载提示，优化用户体验的同时防止数据未就绪时的渲染错误。
• 规范Key值：将循环生成的key转为字符串，符合Antd Tabs组件对key类型的要求，消除控制台警告。

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