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没有被调用，所以当我尝试提交表单时，我得到一个错误说＆＃34; this.props.addPerson不是函数＆＃34;。为什么会这样？

Answer 1

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

为什么在链接到我的组件后没有mapDispatchToProps被调用？

1 个答案: