React Table组件render报Cannot read 'map' of undefined错误求解

核心错误原因 #

你调用filterColleges方法时传入的是this.props.colleges，但你在App.js中引用<Table/>组件时没有传递任何colleges属性，同时你的院校数据实际是存储在Table组件自身的state中，而非父组件传递的props，导致传入过滤方法的值为undefined，最终调用map方法时报错。

修复步骤 #

1. 修正过滤数据源的引用
   找到Table组件render方法中计算filteredColleges的代码，将this.props.colleges替换为this.state.colleges：

// 修改前
const filteredColleges = filterColleges(
    this.props.colleges,
    this.state.searchByName
);

// 修改后
const filteredColleges = filterColleges(
    this.state.colleges,
    this.state.searchByName
);

2. 增加空值防御逻辑，避免后续异常
   可以优化过滤方法，默认传入空数组，同时兼容字段缺失的情况：

const filterColleges = (colleges = [], query) => {
    if(!query) {
        return colleges;
    }
    const lowerQuery = query.toLowerCase();
    return colleges.filter((college) => {
        const collegeName = college.name?.toLowerCase() || '';
        return collegeName.includes(lowerQuery);      
    });
};

3. 可选优化：接口数据校验
   在请求接口赋值时增加类型判断，避免接口返回结构异常导致的报错：

fetch(`https://collegesapi/data.json`)
.then(res => res.json())
.then(
    (result) => {
        this.setState({
            isLoaded: true,
            colleges: Array.isArray(result.getColleges) ? result.getColleges : []
        });
    },
    // 原有错误处理逻辑保持不变
)

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