React渲染JSON列表报TypeError: N.map is not a function求解

TypeError: N.map is not a function 报错的本质是：你调用.map()方法的目标值不是数组类型。
你提供的horse.json示例本身是标准数组格式，但从window.horseData读取到的很可能是未解析的JSON字符串，而非JS原生数组；另外你原代码还漏了useState的导入，也会触发运行异常。
你之前写的App层遍历逻辑确实有问题：SearchPage本身是承载整个列表的容器组件，在外层遍历重复渲染多个SearchPage完全不符合需求，.map()的正确使用位置是在列表组件内部，用来遍历单条数据生成条目UI。

• 第一步：初始化状态时做类型校验+格式转换，保证horses状态始终是数组类型，从根源避免map调用报错
• 第二步：移除App层多余的map遍历，直接将处理好的数组传入SearchPage组件
• 第三步：在SearchPage组件内部调用map，遍历马匹数组渲染单条列表项

App组件修正代码 #

// 补全缺失的React hook导入
import { useState } from 'react';
import SearchPage from './views/SearchPage'

function App() {
    // 初始化state时统一处理数据格式，做兜底容错
    const getInitialHorseData = () => {
        const source = window.horseData;
        // 如果是JSON字符串，先转成JS数据
        if (typeof source === 'string') {
            try {
                const parsed = JSON.parse(source);
                return Array.isArray(parsed) ? parsed : [];
            } catch (e) {
                console.error('马匹数据解析失败', e);
                return [];
            }
        }
        // 如果本身是数组直接返回，否则返回空数组兜底
        return Array.isArray(source) ? source : [];
    }
    const [horses, setHorses] = useState(getInitialHorseData);

    return (
        <div className='app'>
            <SearchPage horses={horses} />
        </div>
    );
}

export default App;

SearchPage组件内map使用示例 #

function SearchPage({ horses }) {
    return (
        <div className="search-container">
            <h2>马匹捐赠列表</h2>
            <div className="horse-list">
                {/* 正确的map使用位置：遍历数组渲染单条数据 */}
                {horses.map(horse => (
                    <div className="horse-card" key={horse.id}>
                        <h3>{horse.name}</h3>
                        <p>已筹金额：{horse.total_donation_amount}</p>
                        <p>目标金额：{horse.max_amount}</p>
                        <p>状态：{horse.dontation_ended ? '捐赠已结束' : '捐赠进行中'}</p>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default SearchPage;

注意：遍历渲染列表项时，必须给遍历的根节点设置唯一的key属性，直接用每条数据的唯一id即可，不要用数组下标作为key，否则可能出现渲染状态错乱的问题。

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