如何在React组件间返回HTML div？Supabase数据展示问题求助

核心问题 #

你当前的代码里，displayData返回的JSX元素没有被挂载到页面上，只是调用了函数却没把结果交给React去渲染；另外单独写unPromiseArray属于冗余操作，完全可以简化。

修正方案（React环境下） #

因为你用了JSX语法，默认假设是在React项目中，以下是标准的异步数据获取+渲染流程：

1. 保留你的fetchData函数，补充错误处理：

async function fetchData() {
  // 获取用户ID
  let {data:{user}} = await supabase.auth.getUser();
  let userId = user.identities[0].id

  // 查询数据
  let { data: properties, error } = await supabase.from('properties')
    .select('id, title, address,num_rooms,num_beds,num_bathrooms,price_per_night,guest_limit')
    .eq('user_id', userId);
  
  // 处理查询错误
  if (error) {
    console.error('获取数据失败:', error);
    return [];
  }
  return properties;
}

2. 在组件中使用状态管理数据，通过副作用钩子触发数据获取并渲染：

import { useState, useEffect } from 'react';

function PropertiesList() {
  // 用状态保存获取到的房源数据
  const [properties, setProperties] = useState([]);

  // 组件挂载时触发数据获取
  useEffect(() => {
    async function loadProperties() {
      // 直接await fetchData拿到数组，无需额外解包函数
      const fetchedProps = await fetchData();
      setProperties(fetchedProps);
    }
    loadProperties();
  }, []); // 空数组确保只执行一次

  // 直接在JSX中映射数组渲染列表
  return (
    <ul>
      {properties.map(prop => (
        <li key={prop.id}>{prop.title}</li>
      ))}
    </ul>
  );
}

对你思考的回应 #

• async函数的返回值必然是Promise，这是JavaScript的语法规则，无法直接返回原始数据，必须通过await或.then()获取结果，所以"解包"是必要的，但可以和数据获取逻辑合并，不需要单独写函数。
• 更简洁的方式就是结合React的useState和useEffect，让数据状态和视图渲染联动，这是React处理异步数据的常规做法。

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