如何修复“对象作为 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 = {

    email: "",

    password: "",

    errors: {} // declaring it as an object

};

您应该将错误声明为字符串

this.state = {

    email: "",

    password: "",

    errors: "" // declaring it as a string

};

或者，这取决于是什么err的的login功能，它应该包含一些字符串来呈现。

Answer 2

该err对象很可能是 的一个实例，Error如果是这种情况，它将包含一个message属性。

所以，这应该是你想要显示的 { this.state.errors.message }