[英]React Axios to Rails Knock
I am trying to send a POST request from axios to a Rails API using the following function in the React frontend: 我正在尝试使用React前端中的以下功能将POST请求从axios发送到Rails API:
export function registerUser({ name, email, password }) {
var postdata = JSON.stringify({
auth: {
name, email, password
}
});
return function(dispatch) {
axios.post(`${API_URL}/user_token`, postdata )
.then(response => {
cookie.save('token', response.data.token, { path: '/' });
dispatch({ type: AUTH_USER });
window.location.href = CLIENT_ROOT_URL + '/dashboard';
})
.catch((error) => {
errorHandler(dispatch, error.response, AUTH_ERROR)
});
}
}
The Knock gem expects the request in the following format: Knock gem需要以下格式的请求:
{"auth": {"email": "foo@bar.com", "password": "secret"}}
My current function seem to generate the correct format (inspecting the request in the browser devtools), but I'm getting the following error: 我当前的函数似乎生成正确的格式(检查浏览器devtools中的请求),但是出现以下错误:
Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {data, status, statusText, headers, config, request}).
未捕获(承诺)错误:对象作为React子对象无效(找到:带有键{data,status,statusText,headers,config,request}的对象)。 If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.
如果您打算渲染孩子的集合,请改用数组或使用React附加组件中的createFragment(object)包装对象。 Check the render method of
Register
.检查
Register
的渲染方法。
class Register extends Component {
handleFormSubmit(formProps) {
this.props.registerUser(formProps);
}
renderAlert() {
if(this.props.errorMessage) {
return (
<div>
<span><strong>Error!</strong> {this.props.errorMessage}</span>
</div>
);
}
}
render() {
const { handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
{this.renderAlert()}
<div className="row">
<div className="col-md-6">
<label>Name</label>
<Field name="name" className="form-control" component={renderField} type="text" />
</div>
</div>
<div className="row">
<div className="col-md-12">
<label>Email</label>
<Field name="email" className="form-control" component={renderField} type="text" />
</div>
</div>
<div className="row">
<div className="col-md-12">
<label>Password</label>
<Field name="password" className="form-control" component={renderField} type="password" />
</div>
</div>
<button type="submit" className="btn btn-primary">Register</button>
</form>
);
}
}
The error is caused by the following line in your code 该错误是由代码中的以下行引起的
errorHandler(dispatch, error.response, AUTH_ERROR)
The exception raised clearly explains that. 提出的例外清楚地说明了这一点。 Instead of setting
error.response
, try to use the actual data from error.response. 代替设置
error.response
,尝试使用error.response中的实际数据。 Eg error.response.data
. 例如
error.response.data
。 Also, you can try replacing the error.response
with a string and see how that behaves, then reference the string you need from error.response.data
. 另外,您可以尝试用字符串替换
error.response
并查看其行为,然后从error.response.data
引用所需的字符串。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.