使用 react js 在主组件中渲染组件时出现错误答案

【问题标题】：Iam getting a error while rendering a component in the main component using react js使用 react js 在主组件中渲染组件时出现错误
【发布时间】：2021-03-28 18:23:12
【问题描述】：

错误是：对象作为 React 子对象无效（找到：带有键 {code、message、a} 的对象）。如果您打算渲染一组子项，请改用数组。

我将在我尝试渲染组件的位置显示我的代码：

document.querySelector(".App").innerHTML = "";
const errorElement = <ShowErr message={err} />;
ReactDOM.render(errorElement, document.querySelector(".App"));

我的组件：

import Button from "@material-ui/core/Button";

const reload = () => {
  window.reload();
};

const ShowErr = (props) => {
  const imgStyle = {
    display: "block",
    margin: "auto",
    marginTop: "100px",
    marginBottom: "50px",
    borderRadius: "50%",
  };
  const msgStyle = {
    textAlign: "center",
    marginTop: "30px",
    fontFamily: "Ubuntu",
    color: "red",
  };
  const btnStyle = {
    display: "block",
    margin: "auto",
    marginTop: "50px",
  };

  return (
    <div className="err">
      <link rel="preconnect" href="https://fonts.gstatic.com" />
      <link
        href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap"
        rel="stylesheet"
      ></link>

      <img
        src="https://img.icons8.com/emoji/48/000000/cross-mark-button-emoji.png"
        style={imgStyle}
      />
      <h3 className="error-msg" style={msgStyle}>
        {props.message}
      </h3>
      <Button color="secondary" style={btnStyle} onClick={reload}>
        Reload and Try Again
      </Button>
    </div>
  );
};

export default ShowErr;

如果有解决办法请告知

【问题讨论】：

标签： javascript reactjs firebase web react-component

【解决方案1】：

不要将链接元素放入 react 组件中，元素应该在 react 渲染之外的 header 标签下。请记住，您在 react 渲染中编写的代码不是 HTML，而是 JSX。

在您的 HTML 文件中

<head>
 <link rel="preconnect" href="https://fonts.gstatic.com" />
      <link
        href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap"
        rel="stylesheet"
      ></link>
<head>

组件

  <img
    src="https://img.icons8.com/emoji/48/000000/cross-mark-button-emoji.png"
    style={imgStyle}
  />
  <h3 className="error-msg" style={msgStyle}>
    {props.message}
  </h3>
  <Button color="secondary" style={btnStyle} onClick={reload}>
    Reload and Try Again
  </Button>
</div>

如果这解决了您的问题，请将其标记为答案

【讨论】：

【解决方案2】：

正如@Sarva 所说，您不能像这样使用链接标签，但这不会给出这个特定的错误。问题出在

{props.message}

它应该是一个字符串类型，在你的情况下它必须是一个对象，所以请检查一下。

【讨论】：

我会尝试传递 err.message 顺便说一句，这是执行操作时捕获的错误
当您尝试渲染不是字符串或 JSX 的东西时会出现此错误。

【解决方案3】：

您发送给 ShowErr 组件的 prop 似乎存在问题。

你要么只需要将文本发送到 props.message

// assume err={code:1, message:"Err", a:true};
const errorElement = <ShowErr message={err.message} />;

或将整个对象发送到道具中

// assume err={code:1, message:"Err", a:true};
const errorElement = <ShowErr {...err} />;

【讨论】：

这是我使用 .catch(err) 捕获的错误
根据你的错误信息错误对象有键{code, message, a}。第一行用于显示该错误对象的示例（更新的答案）。如果对您有帮助，您可以忽略第一行并使用第二行