Next.js项目中Supabase返回JSON数据无法正常渲染问题求助

问题排查结果 #

你代码中有以下几处核心错误：

• useState用法错误：useState返回值是包含「状态值、状态更新函数」的数组，不能直接赋值给dataContest，你当前拿到的dataContest是[初始值, 更新函数]的数组，不是你要存储的列表数据
• 状态更新方式错误：React状态是不可变的，不能直接用pop/push修改原状态数组，必须调用状态更新函数触发修改，否则React不会检测到状态变更，也就不会重新渲染页面
• useEffect缺少依赖数组：当前写法会导致loadData无限重复调用，需要加空依赖数组限制仅组件挂载时执行一次
• Array.map用法错误：map回调的第一个参数是当前遍历的数组元素，第二个是索引，你写的多参数写法完全不符合语法，无法正确拿到每条数据的字段
• 非空判断逻辑错误：dataContest!=[]永远为真（引用类型比较的是内存地址，两个不同数组永远不相等），应该用长度判断数组是否为空
• 关联字段渲染错误：你查询返回的cryptoMonnaie、category都是对象，直接渲染会报错，需要取对应name属性

修正后完整代码 #

import { useState, useEffect} from 'react'
import { supabase } from '../utils/supabaseClient'

export default function Auth() {
    // 正确声明state：第一个参数是状态值，第二个是更新函数
    const [dataContest, setDataContest] = useState([])

    // 加空依赖数组，仅挂载时执行一次
    useEffect(() => {
      loadData()
    }, [])

  async function loadData() {
      try {
        let { data: contest, error } = await supabase
          .from('contest')
          .select(`
            title, startDate, endDate, description,
            cryptoMonnaie (
              name
            ),
            category (
              name
            )
          `)
  
        if (error) {
          throw error
        }
        console.log(contest)
        // 调用更新函数赋值，不要直接修改原state
        setDataContest(contest)
      } catch (error) {
        alert(error.message)
      }
  }

  return (
    <div className="row flex flex-center">
      <div className="col-8 form-widget">
        <h1 className="header">Contest Page</h1>
        <div>
        <table>
            <thead>
              <tr>
                <th>Title</th>
                <th>StartDate</th>
                <th>EndDate</th>
                <th>Statut</th>
                <th>Category</th>
                <th>Crypto</th>
              </tr>
            </thead>
            <tbody>
            {/* 用长度判断数组非空 */}
            {dataContest.length > 0 && dataContest.map((item, index) => (
                  <tr key={item.title || index}>
                    <td>{item.title}</td>
                    <td>{item.startDate}</td>
                    <td>{item.endDate}</td>
                    <td>{item.description}</td>
                    {/* 关联字段取name属性，加可选链防止字段为空报错 */}
                    <td>{item.category?.name}</td>
                    <td>{item.cryptoMonnaie?.name}</td>
                  </tr>
                ))}
            </tbody>
        </table>
        </div>
      </div>
    </div>
  )
}

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