javascript - 如何修复“对象作为 React 子项无效(找到:带有键 {} 的对象)
问题描述
我正在构建一个使用 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) 的地方。
解决方案
为什么你会收到这个错误?
因为你在做{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
,它应该包含一些要呈现的字符串。
推荐阅读
- sas - 在 SAS EG 中将文件从一个目录复制到另一个目录不起作用
- java - 如何在 Java 中返回多个 JSON 项的列表,第 2 部分
- .net-core - 当 PublishSingleFile 设置为 True 时,Service Fabric 可靠服务中出现未处理的异常
- c# - 如何创建具有标准表单布局的 DLL 库以在多个表单上使用?
- ios - 需要 ViewController 布局帮助
- java - log4j2 是否提供任何机制来每天翻转文件并在月底归档日志文件
- python-3.x - 找到图像中的 pixel_maxima 并找到它的坐标以及峰值强度
- reactjs - 我想“盖茨比构建”并部署到子目录
- mongodb - MongoDB $text $search 找不到关键字:['by','and','me'...]
- javascript - 上传视频,并将第一帧保存为图片 JS