从 Supabase 提取数据到 React 时使用 Promise

Question

我有一个从我的 Supabase 数据库获取数据的异步函数，当调用时，returns 一个包含我查询的正确数据的承诺，但是当我尝试在 React 组件中调用这个函数时, 我不知道如何从 Promise 中提取数据，只获取我查询的字符串。

我知道您无法在与您调用的范围相同的范围内获得承诺的结果，但我不确定如何解决这个问题。

我的代码：

export async function getUserValue(uuid, value) {
    const { data, error } = await supabase
        .from('users')
        .select('username').eq("id", "8f1693d3-c6d9-434c-9eb7-90882ea6ef28"); // hard coded values for testing purposes
    return data;
}

我在哪里称呼它：

...
async function Sidebar(props) {
    console.log(getUserValue("", ""))

    return (
        <div className={"sidebar"}>
            <div className="sidebar-main">
                <img className={"sidebar-main-picture"} src={profile_picture} alt="pfp"/>
                <p className={"sidebar-main-name"}>Test</p>
...

结果

Answer 1

React组件存储数据的方式是define and set state.

像异步响应数据一样处理 side-effects 的正确位置是在 effect hook

中

import { useEffect, useState } from "react";

function Sidebar(props) {
  const [ user, setUser ] = useState(null); // initial value

  useEffect(() => {
    getUserValue("", "")
      .then(users => {
        setUser(users[0]) // your response is an array, extract the first value
      })
      .catch(console.error)
  }, []); // empty array means run this once on mount

  return user && ( // only display if `user` is set
    <p>Hello, { user.username }</p> {/* just an example */}
  );
}

_{我觉得以前肯定有人问过这个问题并回答过，但我找不到适用的重复项。如果有人可以 link 现有的 post.}

，很高兴将其删除或标记为 Community Wiki

从 Supabase 提取数据到 React 时使用 Promise

Using Promise when extracting data from Supabase into React

javascript

reactjs

asynchronous

supabase