reactjs React JS异步组件

wswtfjt7 于 2023-03-12 发布在 React

关注(0)|答案(2)|浏览(114)

我有这个组件

import React from 'react'

export const MainPage = async () => {
 let resp =  await fetch(`http://localhost:8000/users/63fc9a335a6f38aa2dd47d15`, {
      method: 'get',
      headers: { 'x-access-token': 123 }
    });
let user = await resp.json();
  
  return (
    <div>MainPage
      
    </div>
  )
}

export default MainPage;

我在应用程序上给她打电话：

function App() {
  return (
    <div className="App">
        <MainPage/>
    </div>
  );
}

然后我得到这个错误：错误：对象作为React子级无效（找到：[object Promise]）。如果要呈现子级集合，请改用数组。
我知道这是因为函数返回一个承诺，但我不知道如何调用它的另一种方式。

reactjs

来源：https://stackoverflow.com/questions/75689775/react-js-async-component

2条答案

按热度按时间

eimct9ow1#

React组件不能是异步的。您应该移动代码以获取具有空依赖项数组的useEffect。

export const MainPage = () => {
  const [resp, setResp] = React.useState(undefined);

  React.useEffect(async () => {
    const resp = await fetch(`http://localhost:8000/users/63fc9a335a6f38aa2dd47d15`, {
      method: 'get',
      headers: { 'x-access-token': 123 }
    });
    setResp(await res.json());
  }, []);

  if (!resp) {
    // Optional: make it show something else while the request is still loading.
    return <div>Loading</div>;
  }
  
  return (
    <div>MainPage</div>
  )
}

赞(0）回复(0）举报 2023-03-12

xriantvc2#

async不能用于函数组件。
使用useState钩子来设置获取的数据，并在组件中显示它

import React, { useState, useEffect } from 'react';

const fetchData = async () => {
  const resp = await fetch(`http://localhost:8000/users/63fc9a335a6f38aa2dd47d15`, {
    method: 'get',
    headers: { 'x-access-token': 123 }
  });
  const data = await resp.json();
  return data;
};

const MainPage = () => {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    fetchData().then(data => setUserData(data));
  }, []);

  return (
    <div>
      {userData ? (
        <div>
          <h1>MainPage</h1>
          <img src={userData.picture} alt="User" />
          <p>Contact Information: {userData.contactInfo}</p>
          <button>{userData.buttonText}</button>
        </div>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
};

export default MainPage;

赞(0）回复(0）举报 2023-03-12

我来回答

reactjs React JS异步组件

2条答案

相关问题

热门标签

最新问答