- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在构建一个使用 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) 的地方。
最佳答案
Why you are getting this error?
因为您在执行 {this.state.errors}
时试图渲染一个对象。
How to fix it?
首先,您需要提供login
函数在做什么以及err
是什么。
您可能只想获取错误字符串,但 err
是一个对象。
如您在错误消息中所见
Objects are not valid as a React child (found: object with keys {})
这意味着 err
是一个空对象。这可以在您声明中看到,您将其声明为
this.state = {
email: "",
password: "",
errors: {} // declaring it as an object
};
您应该将错误声明为字符串
this.state = {
email: "",
password: "",
errors: "" // declaring it as a string
};
或者,根据 login
函数的 err
是什么,它应该包含一些要呈现的字符串。
关于javascript - 如何修复“对象作为 React 子对象无效(找到 : object with keys {}),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57186285/
我有一个接受以下参数的函数: int setvalue(void (*)(void *)); 为了满足参数:void (*)(void *),我创建了这样一个函数: static void *
我有以下代码: typedef void VOID; int f(void); int g(VOID); 在 C 中编译得很好(在 Fedora 10 上使用 gcc 4.3.2)。与 C++ 编译的
这个问题已经有答案了: Is f(void) deprecated in modern C and C++? [duplicate] (6 个回答) 已关闭 7 年前。 B.A.T.M.A.N./A.
我在 ASP.NET Core 3.1 项目上有以下 Identity Server 4 配置: services .AddIdentityServer(y => { y.Events.R
我们有一个 O365 租户,一切都是开箱即用的。租户放置在德国云中,而不是全局 (office.de) 中。我们还开发了一个 Office 插件,使用 OAuth 2.0 授权访问共享点。首先,我们向
我有一个如下所示的路由 routes.MapRoute( name: "Default", url: "{controller}/{action}/{i
我正在尝试使用 OAuth2.0 访问 google 文档。我已经从 Google API 控制台获取了客户端 ID 和 key 。但是当我运行这段代码时,我收到了异常。如果我遗漏了什么,有人可以建议
此代码有效: let mut b: Vec = Vec::with_capacity(a.len()); for val in a.iter() { b.push(val); } 此代码不起作
使用 client_credintials 授权类型请求 EWS oauth2 v2.0 的访问 token 时出现错误。 https://login.microsoftonline.com/tena
我通过 Java 应用程序使用 Google 电子表格时遇到了问题。我创建了应用程序,该应用程序运行了 1 年多,没有任何问题,我什至在 Create Spreadsheet using Google
如何创建 匹配所有无效 Base64 字符的正则表达式?我在堆栈上找到了 [^a-zA-Z0-9+/=\n\r].*$ 但是当我尝试时我得到了带有 - 符号的结果字符串.我根本不知道正则表达式,任何人
我从 Gitlab CI/CD Pipelines 获得错误信息:yaml invalid。问题是由 .gitlab-ci.yml 脚本的第五行引起的: - 'ssh deployer@gita
我有 3 个数据源,设置如下: @Configuration @Component public class DataSourceConfig { @Bean("foo") @Conf
你好,我想用bulkCreate ex 插入数据: [ { "typeId": 5, "devEui": "0094E796CBFCFEF9", "application_name": "Pressu
UIApplicationExitsOnSuspend 不会强制我的应用程序退出。我已经清理过目标、删除了应用程序、重建并重新安装了很多次。 我确实需要退出我的应用程序。 最佳答案 您是否链接了 SD
在 iPhone 配置门户上,显示我的 iPhone 团队配置配置文件无效。有一个“由 Xcode 管理”文本。 “续订”按钮被禁用。 我该如何解决这个问题?谢谢 最佳答案 使用 Xcode 3.2.
好的,所以今天我用我们的“实时”数据库中的新信息更新了我的数据库……从那时起,我的一个表格就出现了问题。如果您需要任何代码,请告诉我,我将对其进行编辑并发布所需的代码... 我有一个报告表格,其中有一
我有一个结构体,其中有一个元素表示为 void (*func)(); 我知道 void 指针通常用于函数指针,但我似乎无法定义该函数。我不断收到取消引用指向不完整类型的指针。我用谷歌搜索了一下但没有结
我正在尝试使用 Coldfusion 9 从 ning 网络获取凭证,所以首先这是测试 api 的 curl 语法: curl -k https://external.ningapis.com/xn/
这个问题已经有答案了: Does C have references? (2 个回答) 已关闭 4 年前。 我正在学习 C 语言引用,这是我的代码: #include int main(void)
我是一名优秀的程序员,十分优秀!