React中对API数组title按字母序映射排序 解决sort不是函数报错

1. 错误根因 #

• movies状态初始值设置为空字符串""，sort()是数组原型专属方法，非数组类型调用该方法会直接抛出is not a function错误。
• 若接口返回的movieData.data.data为null、undefined或其他非数组类型时，也会触发同类报错。

2. 实现逻辑说明 #

排序操作推荐在接口拿到数据后先执行再存入状态，避免每次渲染重复执行排序逻辑损耗性能。要按title字段字母排序可以直接使用字符串原生的localeCompare方法，更适配中英文排序逻辑更严谨。

修正后的完整代码 #

import React, {useState, useEffect} from 'react';
import fetchMovies from '../../services/Movie-api';

export default function Movies(){
    // 初始值修正为空数组
    const [movies, setMovies] = useState([])

    async function getMovies(){
        const movieData = await fetchMovies()
        // 非数组返回值兜底
        const rawMovies = movieData?.data?.data || []
        // 按title字母顺序排序，不希望修改原数组可以先浅拷贝：[...rawMovies].sort(...)
        const sortedMovies = rawMovies.sort((a, b) => a.title.localeCompare(b.title))
        setMovies(sortedMovies)
    }

    useEffect(() => {
        getMovies()
    },[])

    return ( 
        <>
            {/* 渲染判断条件修正，避免空数组渲染空内容
            {movies.length > 0 ? (
                <div>
                    <div>{movies.map((m,idx) => {
                        return <div key={idx}>{m.title}</div>
                    })}  
                    </div>
                </div>
            ):( "loading...")}
        </>
    )
}

补充说明 #

• 如果需要不区分大小写排序，可将排序逻辑修改为`a.title.toLowerCase().localeCompare(b.title.toLowerCase())
• 若需要保留原始接口返回的数组顺序，可对拷贝数组再排序：[...rawMovies].sort(...)，避免sort方法修改原数组。

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