Javascript React触发器中的异步函数错误：对象作为React子对象无效（找到：[对象承诺]）

我有一个算法，可以在我的React应用程序的很多地方使用。出于这个原因，我需要它是异步的，这样就不会延迟组件的渲染

另外，如果reduce循环中有错误，我需要停止函数并返回null。try/catch格式似乎合适。然而，React声称：

对象作为React子对象无效（找到：[对象承诺]）。如果要呈现子对象集合，请改用数组

问题不是因为我的算法，而是因为它的异步性质。我写了一个非常简单的例子，触发了完全相同的错误：

异步功能测试（名称）{
试一试{
如果（！name）{
抛出新错误
}
const formattedName=name.toUppercase（）
返回格式化名称
}
抓住{
返回“错误”
}
}
导出默认函数App（）{
返回(
{test（“joe”）}
);
}

我不知道您的用例是什么，但可能您只想在React中有一个状态，该状态保存名称或您想要的任何值，然后在该值可用时呈现该值，例如：

const [name, setName] = useState("")

async function test(name){
    try{
      if(!name) {
        throw new Error
      }
      const formattedName = name.toUppercase()
      setName(formattedName)
    }
    catch{
      return "error"
    }
}

export default function App() {
  return (
    <>
     {name}
    </>
  );
}

然后从

数据

变量

导入React，{useState}从“React”中呈现所需的任何内容；
import React, { useState } from "react";

export default function App() {
  const [name, setName] = useState("");

  async function test(innerName) {
    if (innerName === name) {
      return;
    }
    try {
      if (!innerName) {
        throw new Error();
      }
      const formattedName = innerName;
      setName(formattedName);
    } catch {
      return "error";
    }
  }

  test("Joe");

  return <>{"Testing : " + name}</>;
}

导出默认函数App（）{
const[name，setName]=useState（“”）；
异步函数测试（innerName）{
如果（innerName==名称）{
返回；
}
试一试{
如果（！innerName）{
抛出新错误（）；
}
const formattedName=innerName；
setName（格式化名称）；
}抓住{
返回“错误”；
}
}
测试（“乔”）；
返回{“Testing:+name}；
}

---

您需要使用该状态在将来的事件中及时更新渲染。示例代码如上图所示。

除非您

等待

异步函数，否则它将返回承诺对象，而不会返回您

返回的值

。即使使用const formattedName=wait name.toUppercase（），错误仍然存在。是的，等待不会停止函数以继续返回承诺“出于这个原因，我需要它是异步的，这样就不会延迟组件的渲染。“-不，不是这样的。您的算法不是异步的，不应将其标记为

async

。目前，如果没有算法的结果，您的组件无法处理渲染-这就是您需要实际解决的问题。不，这是React范围之外的转换函数。它检查一个巨大的json文件并返回正确的动态翻译。所以我不能使用任何状态。那有什么问题？你可以继续设置状态。现在编辑我的回复问题是，如果我的应用程序中有600次调用这个函数，我将需要这么多状态。这不是一个干净的体系结构。我不太理解您的用例，但可以有一个HOC（高阶组件）或上下文提供程序，只保留一个状态，您可以将转换功能共享给任何需要它的人。但答案是。如果合适，请标记为正确答案，但如果我的应用程序中有600个此函数调用，我将需要如此多的状态。。。我想我需要找到另一种方法来处理reduce中的错误。@DoneDeal0该函数在做什么？为什么您认为它很昂贵，但仍然调用了600次？它是一个转换函数，用于检查一个巨大的json文件，并根据提供的键和参数返回正确的动态字符串。我不能每次都添加状态，这太疯狂了。

import React, { useState } from "react";

export default function App() {
  const [name, setName] = useState("");

  async function test(innerName) {
    if (innerName === name) {
      return;
    }
    try {
      if (!innerName) {
        throw new Error();
      }
      const formattedName = innerName;
      setName(formattedName);
    } catch {
      return "error";
    }
  }

  test("Joe");

  return <>{"Testing : " + name}</>;
}