javascript - 错误服务器错误:操作必须是普通对象。使用自定义中间件进行异步操作
问题描述
我正在尝试编写一个 React Web 应用程序,但我收到了一个错误。我不明白为什么它不起作用。当用户进入我的网络应用程序时,我想将他的电子邮件地址保存在 Redux 商店中。
类型.js
export const LOGIN = 'LOGIN';
export const DATA = 'DATA';
在这里我定义了我的动作类型
searchActions.js
import {LOGIN, DATA} from './types';
import axios from 'axios';
import store from '../store'
export const login = ()=> {
store.dispatch({
type: LOGIN
})
};
export const information = async(email) => {
store.dispatch({
type: DATA,
payload: email
})
}
这里根据类型写了我的动作要做的事情。
userReducer.js
import {LOGIN, DATA} from '../actions/types';
const initialState = {
isLogged: false,
email: '',
}
export default function(state = initialState, action){
switch(action.type){
case LOGIN:
return {
...state,
isLogged: true
};
case DATA:
return {
...state,
email: action.payload
};
default:
return state;
}
}
这是一个简单的表格。如果数据库的响应是肯定的,我想将他的邮件保存在商店中。如果我删除第 41 行,效果很好。登录.jsx
import React, { Component } from 'react';
import { connect } from 'react-redux';
import {login, information} from '../actions/searchActions';
import './component.css'
import axios from 'axios';
const baseUrl = "http://localhost:3000";
class SignIn extends Component {
state = {
email:'',
password: '',
}
render() {
const handleChange = (e) => {
this.setState({[e.target.name]: e.target.value});
}
const handleSubmit = (e) => {
//aggiungere la validazione del form in una futura versione
e.preventDefault();
access();
}
const access = () => {
const url = baseUrl + '/router/sign-in';
axios.get(url, {
params: {
email: this.state.email,
password: this.state.password
}
})
.then(res=>{
if (res.data.status !== undefined) {
const data = res.data.status
console.log(JSON.stringify(data)) //users entrato
login();
this.props.history.push('/')
this.props.information(this.state.email) // HERE IS THE ERROR.
// if I delate this line it works
}
else {
alert(res.data.error)
}
})
.catch(error=>{
alert("Error server "+ error)
})
}
return (
<div className="firstly-square">
<div className="center-form">
<form action="" className="sign" onSubmit={handleSubmit}>
<div className="title-sign">
SignIn
</div>
<div className="signin-username">
<label htmlFor="email" className="signin-label">email</label>
<input type="text" name="email" className="signin-input" onChange={handleChange} value={this.state.email}/>
</div>
<div className="signin-password">
<label htmlFor="password" className="signin-label">password</label>
<input type="password" name="password" className="signin-input" onChange={handleChange}/>
</div>
<div className="signin-bottone">
<button type="submit" className="signin-button">Sumbit</button>
</div>
</form>
</div>
</div>
);
}
}
const mapStateToProps = state => ({
email : state.user.email
});
export default connect( mapStateToProps, { information })(SignIn);
请帮我。谢谢
解决方案
这是我的 store.js
import thunk from 'redux-thunk';
import {composeWithDevTools} from 'redux-devtools-extension';
import rootReducer from './reducers'
const middleware = [thunk];
const initialState = {};
const store = createStore(rootReducer, initialState, composeWithDevTools(applyMiddleware(...middleware)));
export default store;
推荐阅读
- swift - 从观察者更新 TableView Cell UI
- visual-studio - Visual Studio 2017 Raspberry Pi Raspbian (Linux) 连接/构建失败
- javascript - 使用 ES6 重构 JSON 对象
- javascript - href 中的多个替换字符串共享同一个类
- visual-studio - 创建新项目时缺少程序集 Xamarin
- postgresql - 如何使用 docker-compose 连接到 PostgreSQL?
- java - Tomcat 服务器未加载网络打印机
- c# - linq 中的动态 Where 与操作 asp.net mvc 中的列表参数
- hyperledger-fabric - 超级账本的最大组织数量?
- angular - Angular 没有看到包含 NoopAnimationsModule