mapDispatchToProps mit react-redux 'connect() und Klassenkomponenten

Question

Ich folge relativ genau dem Tutorial von react-redux, entschied mich aber dafür meine Präsentationskomponente als Klasse zu schreiben. Wie Sie im folgenden Code sehen können, habe ich einen submitHandler geschrieben, der den von read-redux 'connect() gemappten submitHandler aufrufen soll. Aber wenn ich es nenne, ergibt sich TypeError: Cannot read property 'props' of null.

Irgendwelche Vorschläge?

Container Component

import { connect } from 'react-redux' 
 
import New from './New' 
 
import { newEntry } from '../../store/actions' 
 

 
function mapStateToProps(state) { 
 
    return { 
 
    value: state.currentEntries[state.currentEntries.length - 1].value, 
 
    min: state.currentEntries[state.currentEntries.length - 1].value, 
 
    max: 148 
 
    } 
 
} 
 

 
function mapDispatchToProps(dispatch) { 
 
    return { 
 
    onSubmit: (date, value) => { 
 
     dispatch(newEntry(date, value)) 
 
    } 
 
    } 
 
} 
 

 
const NewContainer = connect(
 
    mapStateToProps, 
 
    mapDispatchToProps 
 
)(New) 
 

 
export default NewContainer

Präsentations Component

import React from 'react' 
 
import moment from 'moment' 
 

 
export default class Chart extends React.Component { 
 
    submitHandler(e) { 
 
    e.preventDefault() 
 

 
    // BUG: Results in "TypeError: Cannot read property 'props' of null" 
 
    this.props.onSubmit(this.date.value, this.number.value) 
 

 
    this.date.value = moment().format('YYYYY-MM-DD') 
 
    this.number.value = this.props.min 
 
    } 
 

 
    render() { 
 
    const { value, min, max } = this.props 
 

 
    return (
 
     <form className="New" onSubmit={this.submitHandler}> 
 
     <input type="date" ref={node => { this.date = node}} defaultValue={moment().format('YYYYY-MM-DD')} /> 
 
     <input type="number" ref={node => { this.number = node }} min={min} max={max} defaultValue={value} /> 
 
     <button>Save</button> 
 
     </form> 
 
    ) 
 
    } 
 
}

Answer 1

Sie müssen nur Handler bind Ihre einreichen:

<form className="New" onSubmit={this.submitHandler}> 

Sollte sein:

<form className="New" onSubmit={this.submitHandler.bind(this)}> 

Oder:

<form className="New" onSubmit={(e) => this.submitHandler(e)}> 

Der Unterschied mit einer class Komponente ist, dass Methoden Auto nicht -bind this.

Answer 2

Versuchen Sie dies!

import React from 'react' 
 
import moment from 'moment' 
 

 
export default class Chart extends React.Component { 
 
    submitHandler(e) { 
 
    e.preventDefault() 
 

 
    // BUG: Results in "TypeError: Cannot read property 'props' of null" 
 
    this.props.onSubmit(this.date.value, this.number.value) 
 

 
    this.date.value = moment().format('YYYYY-MM-DD') 
 
    this.number.value = this.props.min 
 
    } 
 

 
    render() { 
 
    const { value, min, max } = this.props 
 

 
    return (
 
     <form className="New" onSubmit={this.submitHandler.bind(this)}> 
 
     <input type="date" ref={node => { this.date = node}} defaultValue={moment().format('YYYYY-MM-DD')} /> 
 
     <input type="number" ref={node => { this.number = node }} min={min} max={max} defaultValue={value} /> 
 
     <button>Save</button> 
 
     </form> 
 
    ) 
 
    } 
 
}