React-Supabase查询报错：Cannot read properties of undefined (reading 'map')

核心问题：解构属性错误 #

你代码里的Supabase查询结果解构用了udata，但Supabase的select()方法返回的成功数据对应的属性是data，不是udata。这就导致udata是undefined，调用setData(udata)后，data变成undefined，后续执行data.map()自然会抛出"Cannot read properties of undefined (reading 'map')"的错误。

修正后的代码 #

import { useEffect, useState } from 'react';
import { createClient } from '@supabase/supabase-js';

const supabase = createClient("https://<project>.supabase.co", '<anon-key>');

const GetBalance = () => {
    const [data, setData] = useState([]);
    const [error, setError] = useState(null); // 新增错误状态，方便排查问题

    useEffect(() => {
        getData();
    }, []);

    async function getData() {
        const { data: udata, error } = await supabase.from("balances").select();
        if (error) {
            setError(error.message); // 捕获错误信息
            return;
        }
        setData(udata || []); // 确保即使返回null也能设置为空数组
    }

    if (error) {
        return <div>加载出错：{error}</div>;
    }

    return (
        <ul>
            {data.map(transactions => (
                <li key={transactions.id}>{transactions.balance}</li> {/* 建议用唯一id作为key，避免balance重复时的渲染问题 */}
            ))}
        </ul>
    )
}

export default GetBalance;

额外优化说明 #

• 新增错误状态捕获：可以直观看到Supabase查询是否有报错，方便排查配置或连接问题
• 用data: udata的别名解构：既保留你原来的变量名习惯，又正确获取Supabase返回的数据
• 设置setData(udata || [])：确保即使查询返回null，data也会是数组，避免map报错
• 替换key为唯一id：balance可能存在重复值，用表中的主键（比如id）作为key更符合React的渲染规范

关于配置的确认 #

既然你已经关闭了RLS且表中有数据，配置层面大概率没问题，但可以再检查：

• 确认<project>和<anon-key>替换成了你Supabase项目的实际值
• 确认balances表的名称拼写完全一致（Supabase表名区分大小写）

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