无法捕获状态变量值

Question

在我的小型web应用程序中。顶级的App.js包含以下结构：

...
import Main from './components/MainComponent';
import { ConfigureStore } from './redux/configureStore';
const store = ConfigureStore();
class App extends Component {
render() {
return (
// make store available to all react app
<Provider store={ store } >
<BrowserRouter>
<div className="App">
<Main />
</div>
</BrowserRouter>
</Provider>
);
}
}
export default App;

MainComponent.js包含

...
import Contact from './ContactComponent';
const mapStateToProps = state => {
return {
dishes: state.dishes,
comments: state.comments,
promotions: state.promotions,
leaders: state.leaders
}
}
class Main extends Component {
render() {
<div>
<Header />
<Switch>
<Route path='/home' component={HomePage} />
<Route exact path='/aboutus' component={() => <About leaders={this.props.leaders} />} />
<Route exact path='/menu' component={() => <Menu dishes={this.props.dishes} />} />
<Route path='/menu/:dishId' component={DishWithId} />
<Route exact path='/contactus' component={Contact} />
<Redirect to="/home" />
</Switch>
<Footer />
</div>
);
}
}
export default withRouter(connect(mapStateToProps)(Main));

ContactComponent.js包含

class Contact extends Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
console.log("Current State is: " + JSON.stringify(this.state));
alert("Current State is: " + JSON.stringify(this.state));
//event.preventDefault();
}
render () {
return (
...
<LocalForm onSubmit={ (values) => this.handleSubmit(values) } >
<Row className="form-group">
<Label htmlFor="firstname" md={2}>First Name</Label>
<Col md={10}>
<Control.text model=".firstname" id="firstname" name="firstname"
placeholder="First Name"
className="form-control" />
</Col>
</Row>
...

ContactComponent中的警报调用应该在用户填写表单并点击提交后显示状态信息。在我重构它以使用redux表单之前，我的网络应用程序显示了带有表单信息的弹出窗口。但现在显示器上只显示了以下内容。欢迎提出任何建议！

Current State is: null

编辑：

reducer.js

import { COMMENTS } from '../shared/comments';
import { PROMOTIONS } from '../shared/promotions';
import { LEADERS } from '../shared/leaders';
import { DISHES } from '../shared/dishes';
export const initialState = {
dishes: DISHES,
comments: COMMENTS,
promotions: PROMOTIONS,
leaders: LEADERS    
};
// reducer needs the current state and the action
// in this case there is no action so just return the state
export const Reducer = (state = initialState, action) => {
return state;
};

configStore.js

import { createStore } from 'redux';
import { Reducer, initialState } from './reducer';
export const ConfigureStore = () => {
const store = createStore(
Reducer,
initialState, 
);
return store;
}

Answer 1

找出这个问题的解决方案。在构造函数中添加以下内容。

constructor(props) {
super(props);
this.state = {
firstname: '',
lastname: '',
telnum: '',
email: '',
agree: false,
contactType: 'Tel.',
message: '',
touched: {
firstname: false,
lastname: false,
telnum: false,
email: false
}
};
}