在 React 中使用 Promise 对象错误：对象作为 React 子对象无效

发布于 2025-01-16 21:49:49 字数 674 浏览 4 评论 0原文

在我的 api.js 中

export function getTeamById(teamId) {
  return fetch(`api값`).then(
    (response) => response.json().then((result) => result.data)
  );
}

getTeamById(42).then((i) => console.log(i.name));

我使用临时 42 然后结果在此处输入图像描述

但是，在我的组件中

<div>{getTeamById(42).then((i) => i.name)}</div>

出现这样的错误：

react-dom.development.js:13231 Uncaught Error ：

对象作为 React 子对象无效（找到：[object Promise]）。

如果您打算渲染子集合，请改用数组。

我如何在组件中表达数据，

请帮助我

，我想在屏幕上表达球队名称，

一样

就像莱斯特城

原文

in my api.js

export function getTeamById(teamId) {
  return fetch(`api값`).then(
    (response) => response.json().then((result) => result.data)
  );
}

getTeamById(42).then((i) => console.log(i.name));

I use temporary 42 then result
enter image description here

But, in my components

<div>{getTeamById(42).then((i) => i.name)}</div>

it comes an Error like this

react-dom.development.js:13231 Uncaught Error:

Objects are not valid as a React child (found: [object Promise]).

If you meant to render a collection of children, use an array instead.

How can i express data in componets

please help me

I want to express team-name in my screen

like this

Leicester City

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我偏爱纯白色 2025-01-23 21:49:49

您不能像这里那样在 return 语句内调用函数：

<div>{getTeamById(42).then((i) => i.name)}</div>

您需要在 return 语句之前调用它，将结果存储在变量中，然后在 return 语句中显示。因此，正确的代码将是：

import React, {useState} from 'react'

const showName = () => {
    const [name, setName] = useState(null)
    getTeamById(42).then((i) => setName(i.name));
  return (
    <div>{name}</div>
  )
}

export default showName;

请注意，您的组件名称可以是任何名称。为了简化事情，我将其保留为 showName。

You cannot call functions inside return statements as you have done here:

<div>{getTeamById(42).then((i) => i.name)}</div>

You need to call it before return statement, store the result in variable, and then display in the return statement. So, the correct code will be:

import React, {useState} from 'react'

const showName = () => {
    const [name, setName] = useState(null)
    getTeamById(42).then((i) => setName(i.name));
  return (
    <div>{name}</div>
  )
}

export default showName;

Note that your component name can be anything. For simplifying things, I have kept it as showName.

回复收藏 0 原文

~没有更多了~