從其他組件回傳資料[ReactNative/React]-有解無憂

希望你們有一個美好的一天！:)

我想問一些事情，我需要從 API 回傳一些串列資料，

我有 3 個檔案，一個被呼叫getUser.js，另一個是User.jsand OtherUser.js，我已經從 API 中獲取資料getUser.js，我需要訪問資料getUser.js來填充User.js和OtherUser.js

問題是，我無法回傳資料getUser.js

這是我的代碼getUser.js

import React from "react";

export const getUser = async () => {
  await fetch("https://myapi.com")
    .then((response) => response.json())
    .then((res) => {
      return res;
    });
};

當我console.log進去User.js的時候OtherUser.js，我得到了這個

Promise {
  "_U": 0,
  "_V": 0,
  "_W": null,
  "_X": null,
}

從其他組件回傳資料 [React Native/React]

這是我的代碼User.js，OtherUser.js看起來像：

import React, {useState} from 'react'
import { getUser } from './someplace/getUser'

export default function User() {
  useEffect(()=>{getDataFromUser()},[])

  const getDataFromUser = async() => {
   console.log(getUser())
  }
}

你們知道為什么嗎？請幫忙：）

uj5u.com熱心網友回復：

在使用 async-await 時避免使用then鏈。將您的功能重構getUser為

export const getUser = async () => {
  const response = await fetch("https://myapi.com");
  const json = await response.json();
  return json;
};

然后在你的User組件中

console.log(await getUser())

uj5u.com熱心網友回復：

您正在記錄一個 Promise，這就是您在控制臺中看到它的原因。

在異步函式內部，如果你想得到函式的結果，你不應該使用“then”。

所以你可以做這樣的事情：

const getUser = async () => {
  let response = await fetch("https://httpbin.org/get");
  return await response.json();
};

但是，請注意，如果 fetch 失敗，它可能會拋出例外。所以我建議使用 try/catch 塊

另請注意，在這種情況下，當您呼叫 getUser() 時，您必須在呼叫該函式以獲取 json 回應之前使用“await”。例如：

let user = await getUser();

如果您想在 useEffect 掛鉤中運行異步函式，請嘗試執行以下操作：

React.useEffect(()=>{
  onOpen = async () => {            
    console.log(await getUser());
  }
  onOpen();
},[]);

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/497190.html

標籤：反应反应式成分

上一篇：你如何修復未終止的JSX內容？

下一篇：如何在React中創建具有4個不同資料端點的重繪按鈕？