Next.JS/React 对象作为 React 子对象无效答案

【问题标题】：Next.JS/React Objects are not valid as a React childNext.JS/React 对象作为 React 子对象无效
【发布时间】：2021-10-17 02:31:45
【问题描述】：

TL;DR
由于代码中的获取请求，我有一个错误Error: Objects are not valid as a React child (found: [object Promise])。该项目是用 Typescript 编写的，当我在另一个项目（Javascript）中尝试相同的代码 sn-p 时，我没有收到错误。

所以我一直在做一个项目，当我尝试通过 fetch 发送 POST 请求时，我收到了错误 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.。我认为 fetch 方法中的元数据导致了这个错误，但我认为没有办法解决它。我检查了它是否只是一个错误，所以我将它与我其他项目中的另一个请求进行了比较，并将其代码复制到我当前的项目中。我仍然遇到同样的错误！会不会是因为我现在的项目是用打字稿写的？

// This is Typescript
//It's also the same code as my other project.

import axios from 'axios';
export default async function component() {
  const uri = "http://localhost:3000"
  const data = {
    a: 1,
    b: 2,
    c: 3
  }
  async function sendRequest() {
     await fetch(`${uri}/api/getPasswords`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({data}),
    }).then(e => {
      console.log(e);
    }).catch(error => {
      console.log(error)
    })
  }
  return (
    <div>
      <button onClick={sendRequest}>Send POST request</button>
    </div>
  );
}

【问题讨论】：

尝试删除export default async function component()中的async。

标签： javascript reactjs typescript next.js fetch

【解决方案1】：

问题是，您在 React 组件上使用了async。请按以下步骤操作：

从 React 组件中移除 async 关键字
使组件名称以大写开头（组件 -> 组件）
使用axios 代替fetch 并使用trycatch（可选）

import axios from 'axios'

async function sendRequest() {
  try {
    const res = await axios.post(`${uri}/api/getPasswords`, JSON.stringify({ data }))
    console.log(res.data)
  }
  catch(err) {
    console.log(err)
  }
  
}

【讨论】：

【解决方案2】：

问题与 Typescript 无关，您尝试将 Promise 用作 React 组件，首先解析 Promise，然后将所需的数据作为适当的 React 组件发送。

【讨论】：