尝试使用 Next.js / React.js 时出现未处理的运行时错误，

Question

我正在尝试编辑其他人制作的这个 URL 缩短器项目。我在提交表单时收到此错误。（输入网址和自定义别名）

错误：对象作为 React 子对象无效（找到：带有键 {statusCode, message} 的对象）。如果您打算渲染子集合，请改用数组。

我不知道从哪里开始解决这个问题。任何帮助都会很棒！我对编程还很陌生，但是让它像这里一样运行将是一个很好的开始！

Github 代码： https: //github.com/onderonur/onurl

代码沙盒链接：https://codesandbox.io/s/exciting-wave-p79xi

错误的屏幕截图

Answer 1

很抱歉，过去 5 个月没有人回复，但我刚刚看到这篇文章，我想我会有所帮助。我之前在使用 Next JS 时遇到过这个错误，当我尝试在浏览器上显示一个对象时，它发生在我身上。在这种情况下，错误对象试图显示，而在 React 中你无法做到这一点。

这是错误对象的示例：

{"statusCode":500,"message":"Invalid connection string"} 

在此代码块的第 5 行中，您可以看到整个错误对象正在尝试显示，正如错误所述，在 React 中无法完成此操作：

{(data || error) && (
      <Alert status={error ? 'error' : 'success'} marginY={2}>
          <AlertIcon />
          <AlertTitle>
                  {error || 'Your new URL has been created successfully!'}
          </AlertTitle>
      </Alert>
)}

解决方案#1

要解决此问题，您必须使其仅显示基本类型（如字符串）。为此，您可以简单地更改errorreducer函数的大小写以返回错误的消息属性（字符串）而不是整个对象：

  const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'request':
      return { ...state, data: undefined, error: undefined };
    case 'success':
      return { ...state, data: action.response.data };
    case 'error':
      return { ...state, error: action.error.response?.data.message };
    default:
      throw new Error();
  }
};

我将上面代码块的第 8 行更改为：

      return { ...state, error: action.error.response?.data};

到：

      return { ...state, error: action.error.response?.data.message};

这样，只有错误响应的消息属性可以存储在状态中，而不是整个错误对象，这又不能直接显示，因为它不是原始类型。

解决方案#1 CodeSandbox：CodeSandbox 上的第一个解决方案代码

解决方案#2

解决此问题的另一种方法是更改​​ 中的 JSX return()，使其仅显示error.message(string) 而不是error(object)；

{(data || error) && (
         <Alert status={error ? 'error' : 'success'} marginY={2}>
            <AlertIcon />
            <AlertTitle>
              {error!.message ||
                'Your new URL has been created successfully!'}
            </AlertTitle>
         </Alert>
)}

我将上面代码块中的第 5 行更改为：

<AlertTitle>
     {error|| 'Your new URL has been created successfully!'}
</AlertTitle>

到：

<AlertTitle>
      {error!.message|| 'Your new URL has been created successfully!'}
</AlertTitle>

in!的error!.message目的是强制 Typescript 接受错误对象存在，而不是给我们一个对象可能为 null 的错误。在渲染之前我们已经检查了错误对象是否存在，所以如果我们只使用!.

这在技术上确实有效，但因为该项目使用 Typescript，所以您必须修改State接口以使其具有正确的类型。界面应该是这样的State：

interface State {
   data: Maybe<ShortUrlData>;
   error:
     {
         statusCode: number;
         message: string;
       }
     | undefined;
 }

这样，Typescript 编译器就不会抱怨没有为错误对象定义属性消息，因为之前的接口State是这样的：

interface State {
   data: Maybe<ShortUrlData>;
   error: Maybe<String>;
 }

由于在这种情况下我们在调度程序中发送整个错误对象，因此Maybe<String>类型对于它来说是不正确的

解决方案#2 CodeSandbox：CodeSandbox 上的第二个解决方案代码

我希望这有帮助。如果有什么我可以更好地解释或者我应该更改部分解释，请告诉我。就为什么首先从后端发送错误响应而言，我需要进一步调查代码，看看它为什么会发送错误。一旦我找到一些东西，我会更新答案。