React组件调用GetDataService的getData报错Cannot read properties of undefined如何解决

错误原因 #

你遇到的报错根本原因是实例化GetDataService时传入的dataRepo参数未定义，导致GetDataService内部的dataRepo属性为undefined，调用this.dataRepo.getData时自然抛出无法读取undefined属性的错误。

解决步骤 #

• 第一步：在传入dataRepo前，先实例化实现了DataRepository接口的DataFetch类，再将实例作为构造参数传给GetDataService
• 第二步：为了避免组件每次渲染都重复创建服务实例，建议使用useMemo缓存服务实例

修正后的组件代码示例：

import { useState, useEffect, useMemo } from 'react';
// 替换为你实际的文件导入路径
import GetDataService from './services/GetDataService';
import DataFetch from './services/DataFetch';

function DataComponent() {
    const [data, setData] = useState([]);
    // 缓存服务实例，仅在组件首次挂载时创建一次
    const getDataService = useMemo(() => {
        // 先实例化DataFetch
        const dataRepo = new DataFetch();
        return new GetDataService(dataRepo);
    }, []);

    useEffect(() => {
        getDataService.getData()
            .then(res => res.json())
            .then(fetchedData => {
                console.log('Data ' + JSON.stringify(fetchedData));
                setData(fetchedData);
            })
            // 新增异常捕获，避免网络错误导致组件崩溃
            .catch(err => console.error('数据拉取失败:', err));
    }, [getDataService]);
    
    // 其余组件渲染逻辑
    // ...
}

额外优化建议 #

如果后续出现this指向异常的问题，可以把GetDataService中的getData方法改为箭头函数，固化this指向：

export default class GetDataService {
    private dataRepo: DataRepository

    constructor(dataRepo: DataRepository) {
        this.dataRepo = dataRepo;
    }

    getData = () => {
        return this.dataRepo.getData();
    }
}

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