如何修复“对象作为 React 子对象无效（找到：带有键 {} 的对象）”

Question

我正在构建一个使用 React、Express、Sequalize 和 mySQL 的全栈网站。到目前为止，它具有注册和登录等功能，但是当我尝试添加错误处理时，它失败了。

我收到以下错误消息：

Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

    in div (at Login.js:46)

    in form (at Login.js:44)

    in div (at Login.js:43)

    in div (at Login.js:42)

    in div (at Login.js:41)

    in Login (created by Route)

    in Route (at App.js:26)

    in Switch (at App.js:23)

    in div (at App.js:22)

    in div (at App.js:15)

    in Router (created by BrowserRouter)

    in BrowserRouter (at App.js:14)

    in App (at src/index.js:7)

当我添加此代码{this.state.errenter code hereors}以显示诸如“找不到用户”之类的错误消息时。

import React, { Component } from "react";

import { login } from "./UserFunctions";

class Login extends Component {

  constructor() {

    super();

    this.state = {

      email: "",

      password: "",

      errors: {}

    };

    this.onChange = this.onChange.bind(this);

    this.onSubmit = this.onSubmit.bind(this);

  }

  onChange(e) {

    this.setState({ [e.target.name]: e.target.value });

  }

  onSubmit(e) {

    e.preventDefault();

    const user = {

      email: this.state.email,

      password: this.state.password

    };

    login(user, (res, err) => {

      if (res) {

        this.props.history.push(`/`);

      } else {

        this.setState({

          errors: err

        });

      }

    });

  }

  render() {

    return (

      <div className="container">

        <div className="row">

          <div className="col-md-6 mt-5 mx-auto">

            <form noValidate onSubmit={this.onSubmit}>

              <h1 className="h3 mb-3 font-weight-normal">Please sign in</h1>

              <div className="alert alert-danger" role="alert">

                {this.state.errors}

              </div>

              <div className="form-group">

                <label htmlFor="email">Email address</label>

                <input

                  type="email"

                  className="form-control"

    );

  }

}

export default Login;

感谢有关如何解决此问题的任何指导。

Answer 1

为什么会出现此错误？因为您在执行{this.state.errors}.如何解决？首先，您需要提供login函数正在做什么以及是什么err。您可能只想获取错误字符串，但它err是一个对象。正如您在错误消息中看到的那样对象作为 React 子对象无效（找到：带有键 {} 的对象）这意味着这err是一个空对象。这可以在你声明它的状态中看到this.state = {&nbsp; &nbsp; email: "",&nbsp; &nbsp; password: "",&nbsp; &nbsp; errors: {} // declaring it as an object};您应该将错误声明为字符串this.state = {&nbsp; &nbsp; email: "",&nbsp; &nbsp; password: "",&nbsp; &nbsp; errors: "" // declaring it as a string};或者，这取决于是什么err的的login功能，它应该包含一些字符串来呈现。

Answer 2

该err对象很可能是 的一个实例，Error如果是这种情况，它将包含一个message属性。所以，这应该是你想要显示的&nbsp;{ this.state.errors.message }