Не в состоянии захватить значение переменной состояния

Question

В моем крошечном веб-приложении. Приложение верхнего уровня. 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 должен отображать информацию о состоянии после того, как пользователь заполнил форму и нажал на submit. Мое веб-приложение отображало всплывающее окно с информацией о форме, прежде чем я реорганизовал его для использования избыточных форм. Но теперь дисплей только говорит ниже. Любой совет приветствуется!

Current State is: null

РЕДАКТИРОВАТЬ:

редуктор. 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;
};

configureStore. 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
        }
    };
}