如何修复“对象作为 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"
                  name="email"
                  placeholder="Enter email"
                  value={this.state.email}
                  onChange={this.onChange}
                />
              </div>
              <div className="form-group">
                <label htmlFor="password">Password</label>
                <input
                  type="password"
                  className="form-control"
                  name="password"
                  placeholder="Password"
                  value={this.state.password}
                  onChange={this.onChange}
                />
              </div>
              <button
                type="submit"
                className="btn btn-lg btn-primary btn-block"
              >
                Sign in
              </button>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

export default Login;

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

编辑：登录函数在后端调用以下函数：

users.post("/login", (req, res) => {
  User.findOne({
    where: {
      email: req.body.email
    }
  })
    .then(user => {
      if (user) {
        if (bcrypt.compareSync(req.body.password, user.password)) {
          let token = jwt.sign(user.dataValues, process.env.SECRET_KEY, {


            expiresIn: 1440
          });
          res.send(token);
        }
      } else {
        res.status(400).json({ error: "User does not exist" });
      }
    })
    .catch(err => {
      res.status(400).json({ error: err });
    });
});

并通过这个中间层运行它：

export const login = user => {
  return axios
    .post("users/login", {
      email: user.email,
      password: user.password
    })
    .then(response => {
      localStorage.setItem("usertoken", response.data);
      return response.data;
    })
    .then(response => {
      return response.error;
    })
    .catch(err => {
      console.log(err);
    });
};

这是定义 (err) 的地方。

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

或者，取决于 login 函数的 err 是什么，它应该包含一些要呈现的字符串。

Answer 2

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

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