开发者问题收集

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

2021-08-13
169
javascript reactjs typescript next.js fetch

TL;DR
由于代码中的提取请求，我收到错误 错误：对象作为 React 子项无效（找到：[object Promise]） 。该项目是用 Typescript 编写的，当我在另一个项目（Javascript）中尝试相同的代码片段时，我没有收到错误。

所以我一直在做一个项目，当我尝试通过提取发送 POST 请求时，我收到错误 错误：对象作为 React 子项无效（找到：[object Promise]）。如果您打算呈现子项集合，请改用数组。 。我认为提取方法中的元数据导致了此错误，但我认为没有办法解决它。我检查了这是否只是一个错误，所以我将它与我的其他项目中的另一个请求进行了比较，它将其代码复制到了我当前的项目中。但我仍然收到同样的错误！是不是因为我现在的项目是用typescript写的？ 

// 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>
  );
}
2个回答

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

  1. 从 React 组件中删除 async 关键字
  2. 使组件名称以大写字母开头 (component -> Component)
  3. 使用 axios 代替 fetch 并使用 trycatch ( 可选 ) 
import axios from 'axios'

async function sendRequest() {
  try {
    const res = await axios.post(`${uri}/api/getPasswords`, data)
    console.log(res.data)
  }
  catch(err) {
    console.log(err)
  }
  
}
Usman Sabuwala
2021-08-17

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

Will Maradiaga
2021-08-13