javascript - TypeError: dispatch is not a function - Stack Overflow

admin管理员组

文章数量:1347384

I'm getting this error, 'TypeError: dispatch is not a function' what am I doing wrong? I have read the documentation for redux but I can not see that I'm doing something wrong? (Beginner at redux) The fault is in the inputIsValid method

import React from 'react';
import { connect } from 'react-redux';
import { validatedAuthInput } from '../actions/index';

class AuthInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = { inputValue: '' };
    }

    inputIsValid({ dispatch }, value) {
         dispatch(validatedAuthInput(this.props.type, value));

         this.validInput(this.props.type, value);
         return value.includes('@') && value.length > 4 ? 'success' : 'warning';
    }

    handleinput = event => {
        this.setState({ inputValue: event.target.value });
    };

    render() {
        return (
            <FormGroup
                label={this.props.label}
                validationState={this.inputIsValid(this.state.inputValue)}>
                <ControlLabel>{this.props.label}</ControlLabel>
                <FormControl
                    type={this.props.type}
                    value={this.state.value}
                    placeholder={this.props.placeholder}
                    onChange={this.handleinput}
                />
                <FormControl.Feedback />
            </FormGroup>
        );
    }
}

export default connect(null)(AuthInput);

I'm getting this error, 'TypeError: dispatch is not a function' what am I doing wrong? I have read the documentation for redux but I can not see that I'm doing something wrong? (Beginner at redux) The fault is in the inputIsValid method

import React from 'react';
import { connect } from 'react-redux';
import { validatedAuthInput } from '../actions/index';

class AuthInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = { inputValue: '' };
    }

    inputIsValid({ dispatch }, value) {
         dispatch(validatedAuthInput(this.props.type, value));

         this.validInput(this.props.type, value);
         return value.includes('@') && value.length > 4 ? 'success' : 'warning';
    }

    handleinput = event => {
        this.setState({ inputValue: event.target.value });
    };

    render() {
        return (
            <FormGroup
                label={this.props.label}
                validationState={this.inputIsValid(this.state.inputValue)}>
                <ControlLabel>{this.props.label}</ControlLabel>
                <FormControl
                    type={this.props.type}
                    value={this.state.value}
                    placeholder={this.props.placeholder}
                    onChange={this.handleinput}
                />
                <FormControl.Feedback />
            </FormGroup>
        );
    }
}

export default connect(null)(AuthInput);

• javascript
• reactjs
• redux

Share Improve this question Follow edited Jan 22, 2018 at 21:31 Jeremy Danner asked Jan 22, 2018 at 21:27 Jeremy DannerJeremy Danner 7511 silver badge77 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Props is not automatically passed into that function so you need to do this.props inside the function instead. I will remend you separate your actions from your ponent and pass a mapDispatchToProps object to connect as described here

If you're using the connect pattern, you'll be able to get at dispatch via: this.props.dispatch.

Your inputIsValid function is trying to "destructure" the first argument and grab the dispatch property from there. This is wrong because then you're calling this.inputIsValid with just this.state.inputValue as an argument. But in any case you shouldn't be trying to receive dispatch as an argument in your function. Since this is an instance function (and you're ponent is connected), you have access to dispatch from this.props.dispatch.

本文标签： javascriptTypeError dispatch is not a functionStack Overflow