Reactjs 为什么不是'；t mapDispatchToProps在链接到我的组件后被调用？

我有一个类似于（/Inputs/AddPersonForm）的组件：

import React，{Component}来自'React'；
从'react redux'导入{connect}；
进口{
BrowserRouter作为路由器，
路线,，
链接
重新使用
带路由器
}从“反应路由器dom”；
从“../Actions/personActions”导入{addPerson}；
从“../Components/Person”导入{Person}
导出类AddPersonForm扩展组件{
建造师（道具）{
超级（道具）
this.state={
//TODO将名称初始化为刚搜索以生成UI的值
清洁工
名称：“”，
说明：“”，
位置：“”，
} 
}
handleOnChange=事件=>{
const{value，name}=event.target；
这是我的国家({
[名称]：值，
});
}
handleOnSubmit=事件=>{
const person=Object.assign（{}，this.state）；
event.preventDefault（）；
//链接到此组件时，mapdispatchtoprops不工作
此.props.addPerson（人）；
这是我的国家({
名称：“”，
说明：“”，
位置：“”，
});
}
componentDidMount（）{
警报（“您正在搜索的人在我们的数据库中尚不存在
系统。请添加他们的姓名、物理描述和城市，
州和邮政编码。”）
}
render（）{
返回(
人名
物理描述
位置
将人员添加到存档
); 
}
}
const mapDispatchToProps=（）=>{
调试器；
返回{
addPerson:addPerson
};
};
导出默认连接（null，mapDispatchToProps）（AddPersonForm）；

我有一个指向该组件的重定向，以及从该组件（/Components/Person）指向该组件的链接：

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../Inputs/AddPersonForm”导入{AddPersonForm}；
从“../Inputs/AddReviewForm”导入AddReviewForm；
从“../Presentational/FormattedPerson”导入{FormattedPerson}；
进口{
BrowserRouter作为路由器，
路线,，
链接
重新使用
转换
}从“反应路由器dom”；
导出类扩展组件{
render（）{
如果（this.props.person==“unfound”）{
报税表（
{this.props.history.push（'/addperson'）}
)
}否则{
报税表（
为此人添加新评论


不是你要找的{this.props.person.name}？把它们加入我们的系统！
); 
}
}
} 
函数MapStateTrops（状态）{
返回{person:state.peopleReducer.person}
}
导出默认连接（MapStateTops，null）（个人）；

---

当我通过重定向导航时，一切正常，mapDispatchToProps被调用，我可以提交表单。但是当我通过链接导航时，mapDispatchToProps不会被调用，因此当我尝试提交表单时，我会收到一个错误，上面写着“this.props.addPerson不是函数”。为什么会发生这种情况？

您有两个导出，一个在第一行，一个在最后一行。删除第一个。

哈哈，你说得对，这就是问题所在。我是个白痴。谢谢我们都去过那里。干杯

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); 

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);