[英]Cannot update state with react-redux
我想在我的 React 应用程序中使用 Redux 管理两个状态。 这两个状态是userName
和isLogin
,这是布尔值,包含用户是否正在登录。
我写了一些代码,为初学者阅读一些网页。
源代码/组件/登录.js
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
};
this.handleEmail = this.handleEmail.bind(this);
this.handlePassword = this.handlePassword.bind(this);
this.handleMainPage = this.handleMainPage.bind(this);
}
handleMainPage(){
this.props.onSubmit(this.state.email);
}
handleEmail(event) {
this.setState({email: event.target.value});
}
handlePassword(event) {
this.setState({password: event.target.value});
}
render() {
return (
<Container component="main">
<CssBaseline />
<div>
<Typography component="h1" variant="h5">
Login
</Typography>
<form noValidate>
<TextField value={this.state.email} onChange={this.handleEmail}/>
<TextField value={this.state.password} onChange={this.handlePassword} type="password"/>
<Button onClick={this.handleMainPage}>
Sign In
</Button>
</form>
</div>
</Container>
)
}
}
export default Login;
src/容器/Login.js
import Login from '../components/Login';
import { connect } from 'react-redux';
import { login } from '../actions';
const mapStateToProps = (state, prop) => {
return {
userName: state.userName,
isLogin: state.isLogin,
}
};
const mapDispatchToProps = (dispatch) => {
return {
onSubmit: (username) => {
dispatch(login(username))
}
}
};
let loginForm = connect(mapStateToProps, mapDispatchToProps)(Login);
export default loginForm;
src/reducers/index.js
const defaultState = {
userName: "",
isLogin: false,
};
const userStatus = (state=defaultState, action) => {
switch (action.type) {
case 'LOGIN':
return Object.assign({}, {
userName: action.userName,
isLogin: action.isLogin,
});
default:
return state;
}
}
export default userStatus;
源代码/操作/index.js
export const login = (username) => {
return {
type: 'LOGIN',
userName: username,
isLogin: true,
};
}
源代码/索引.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import './index.css';
import App from './App';
import MainWindow from './Main';
import userStatus from './reducers';
import * as serviceWorker from './serviceWorker';
var Routes = (
<Route path='/' component={App}>
<Route exact path='/' component={App} />
<Route path='/login' component={App} />
<Route path='/signup' component={App} />
<Route path='/main' component={MainWindow} />
</Route>
);
let store = createStore(userStatus);
ReactDOM.render(
<Provider store={ store }>
<Router>{Routes}</Router>
</Provider>,
document.getElementById('root')
);
serviceWorker.unregister();
我检查了 src/reducers/index.js 中的action.userName
和action.isLogin
有我在登录表单中输入的值,但在 src/components/Login.js 中,这些值是空的和假的(初始状态)。
如何正确更新这些状态?
您似乎没有提交表单。 您需要一个函数(通常是 handleSubmit)来提交表单。 所以像这样:
<form onSubmit={handleSubmit}>
// ...
<Button variant="contained" color="secondary" type="submit">
Add note
</Button>
</form>
你的 handleSubmit 函数看起来像 -->
const handleSubmit = e => {
// if your input value is truthy, then add input to state
if (noteText) {
dispatch({
type: "ADD_NOTE",
noteText,
id: uuid(),
dateCreated: Date()
});
}
// set input value back to empty string
setNoteText("");
// don't let page refresh so your state is saved
e.preventDefault();
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.