React函数组件分页报错及错误边界适配问题求助

你的问题核心是API请求完成前data处于未定义状态，调用slice方法时触发报错，以下是几种实用的解决方案：

方案1：初始化data为空数组 #

直接将data的初始状态设为空数组，这样即使数据还没加载完成，调用数组方法也不会报错：

function App() {
    // 把useState()改成useState([])
    const [data, setData] = useState([]);
    const [filteredData, setFilteredData] = useState([]);
    const [page, setPage] = useState(1);

    useEffect(() => {
        const getData = async () => {
            const res = await axios.get(config.endpoint);
            setData(res.data);
            setFilteredData(res.data);
        };
        getData();
    }, []);

    //Handling Search
    const handleSearch = (text) => {
        setFilteredData(performSearch(text, data));
    };

    //paging;
    const end = page * config.pageSize;
    const start = end - config.pageSize;

    // 现在data初始是数组，slice不会报错
    const filterData = data.slice(start, end);
    //change Page Function
    const handlePage = (num) => setPage(num);

    return (
        <div className="App">
            <Search handleSearch={handleSearch} />
            <UserTable data={filterData} />
            <Pages handlePaginate={handlePage} dataLength={data.length} />
        </div>
    );
}

export default App;

方案2：使用可选链操作符+默认值 #

如果不想修改初始状态，在使用data时通过可选链判断，避免未定义时调用方法：

// 替换原分页逻辑中的filterData定义
const filterData = data?.slice(start, end) || [];

// 同时处理分页组件的dataLength
<Pages handlePaginate={handlePage} dataLength={data?.length || 0} />

data?.slice会在data为undefined时返回undefined，再通过|| []兜底为空数组；data?.length || 0则保证分页组件拿到的是有效数字。

方案3：添加加载状态，避免渲染未就绪的内容 #

新增加载状态，在数据未加载完成时显示加载提示，不渲染表格和分页逻辑：

function App() {
    const [data, setData] = useState();
    const [filteredData, setFilteredData] = useState([]);
    const [page, setPage] = useState(1);
    // 新增加载状态
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const getData = async () => {
            try {
                const res = await axios.get(config.endpoint);
                setData(res.data);
                setFilteredData(res.data);
            } catch (err) {
                // 可在这里添加错误处理逻辑
                console.error('数据加载失败:', err);
            } finally {
                // 无论成功失败都结束加载状态
                setLoading(false);
            }
        };
        getData();
    }, []);

    //Handling Search
    const handleSearch = (text) => {
        setFilteredData(performSearch(text, data));
    };

    //paging;
    const end = page * config.pageSize;
    const start = end - config.pageSize;

    const filterData = data?.slice(start, end) || [];
    const handlePage = (num) => setPage(num);

    if (loading) {
        return <div>加载中...</div>;
    }

    return (
        <div className="App">
            <Search handleSearch={handleSearch} />
            <UserTable data={filterData} />
            <Pages handlePaginate={handlePage} dataLength={data?.length || 0} />
        </div>
    );
}

export default App;

这个方案还能顺便处理API请求失败的情况，提升用户体验。

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