Блог

У меня есть алгоритм, который можно использовать во многих местах в моем приложении React. По этой причине мне нужно, чтобы он был асинхронным, чтобы не задерживать рендеринг компонентов.

Кроме того, если в цикле сокращения есть ошибка, мне нужно остановить функцию и вернуть значение null. Формат try / catch кажется подходящим. Однако React утверждает, что:

Объекты недопустимы как дочерние элементы React (найдено: [обещание объекта]). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив.

Проблема не в моем алгоритме, а в его асинхронной природе. Я написал этот очень простой пример, который вызывает точно такую же ошибку:

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

export default function App() {
  return (
    <>
     {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}
    </>
  );
}
  

РЕДАКТИРОВАТЬ: Предположим, что у вас есть эта js функция в utils папке или что-то еще, что выполняет весь упомянутый вами синтаксический анализ. Вы можете рассматривать это как асинхронный вызов API, то, что вам нужно, находится в вашем компоненте React (предположим, при первом рендеринге), следующее:

 const [data, setData] = useState(...)

useEffect(async () => {
  const data = await callToYourParsingFunctionThatIsAsync();
  setData(data);
}, [])
  

И затем вы отображаете все, что вам нужно, из этой data переменной

 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}</>;
}
  

Вам необходимо использовать состояние для обновления рендеринга при будущем событии во времени. Пример кода выглядит так, как указано выше.