Почему mapDispatchToProps не вызывается после ссылки на мой компонент?

Question

У меня есть компонент, который выглядит следующим образом (/ Inputs / AddPersonForm):

import React, { Component } from 'react';
import { connect } from 'react-redux'; 
import {
  BrowserRouter as Router,
  Route,
  Link,
  Redirect,
  withRouter
} from "react-router-dom";
import { addPerson } from '../Actions/personActions'; 
import { Person } from '../Components/Person'


export class AddPersonForm extends Component {

  constructor(props) {
    super(props)
    this.state = { 
      //TODO initialize name to value that was just searched for to make UI 
cleaner
      name: '',
      description: '',
      location:'', 
    } 
  }

  handleOnChange = event => {
    const { value, name } = event.target;
    this.setState({
      [name]: value,
    });
  }

  handleOnSubmit = event => { 
    const person = Object.assign({}, this.state); 
    event.preventDefault();
    //mapdispatchtoprops not working when linking to this component
    this.props.addPerson(person);   
    this.setState({
      name: '',
      description: '',
      location:'', 
    });
  }

  componentDidMount() {
    alert("The person you are searching for does not yet exist in our 
system. Please add their name, a physical description, and their city, 
state, and zip code.")
 }

  render() { 

  return (
    <div className="container">
      <div className="row">
        <div className="col-md-8 col-md-offset-2">
          <div className="panel panel-default">
            <div className="panel-body">
              <form className="form-horizontal" onSubmit={this.handleOnSubmit}>
                <div className="form-group">
                  <label htmlFor="name" className="col-md-4 control-label">Person's Name</label>
                  <div className="col-md-5">
                    <input
                      className="form-control"
                      name="name"
                      value={this.state.name}
                      onChange={this.handleOnChange}
                    />
                  </div>
                </div>
                <div className="form-group">
                  <label htmlFor="description" className="col-md-4 control-label">Physical Description</label>
                  <div className="col-md-5">
                    <textarea
                      className="form-control"
                      name="description"
                      value={this.state.description}
                      onChange={this.handleOnChange}
                    />
                  </div>
                </div>
                <div className="form-group">
                  <label htmlFor="location" className="col-md-4 control-label">Location</label>
                  <div className="col-md-5">
                    <input
                      className="form-control"
                      type="text"
                      name="location"
                      value={this.state.location}
                      onChange={this.handleOnChange}
                    />
                  </div>
                </div>
                <div className="form-group">
                  <div className="col-md-6 col-md-offset-4">
                    <button type="submit" className="btn btn-default">Add Person to Archive</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div> 
  ); 
}
}

  const mapDispatchToProps = () => {
    debugger;
    return {
      addPerson: addPerson
    };
  };

export default connect(null, mapDispatchToProps)(AddPersonForm); 

У меня перенаправление на этот компонент и ссылка на него из этого компонента (/ Components / Person):

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { AddPersonForm } from '../Inputs/AddPersonForm'; 
import  AddReviewForm  from '../Inputs/AddReviewForm';
import { FormattedPerson } from '../Presentational/FormattedPerson'; 
import {
  BrowserRouter as Router,
  Route,
  Link,
  Redirect,
  Switch
} from "react-router-dom"; 

export class Person extends Component { 

  render() { 

if (this.props.person == "unfound") { 
  return ( 
    <div> 
      {this.props.history.push('/add-person')}
    </div>
  )

} else { 

  return ( 
    <div> 
      <div className= "container">
      <Router> 
    <div>
      <Link to={`${this.props.match.url}/reviews/new`}>
          Add a New Review for this Person
      </Link><br />
      <Link to='/add-person'
          >Not the {this.props.person.name} you were looking for? Add them to our system! 
      </Link>
      <div>
      <Switch>
        <Route path={`${this.props.match.url}/reviews/new`} 
        component={AddReviewForm} /> 
        <Route path='/add-person' component={AddPersonForm}/>
      </Switch> 
      </div> 
      </div>
     </Router> 
     </div>
    <FormattedPerson name= {this.props.person.name} description= {this.props.person.description} location= {this.props.person.location} reviews= {this.props.person.reviews} 
     /> 
    </div> 
  ); 
   }
 }
} 

function mapStateToProps(state){ 
  return {person: state.peopleReducer.person}
}

export default connect(mapStateToProps, null)(Person);  

Когда я перехожу через перенаправление, все работает нормально, вызывается mapDispatchToProps, и я могу отправить форму.Но когда я перехожу по ссылке, mapDispatchToProps не вызывается, поэтому, когда я пытаюсь отправить форму, я получаю сообщение об ошибке «this.props.addPerson не является функцией».Почему это происходит?

Answer 1

У вас есть два экспорта, один в первой строке и один в последней.Снимите первый.