无法使用React redux读取未定义的地图属性

Question

我正在尝试向组件添加信息，但是一旦我单击表单按钮，我就无法读取未定义的属性映射。请帮忙。我检查了所有的Db和路线，减速机等，它们都很好。

这是包含表单的组件（console.log返回“undefined”）

import React from "react";
import { connect } from "react-redux";
import { addExercise } from "../actions/exercises";

class CreateExercise extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      newExercise: {},
    };
  }
  handleSubmit(e) {
    e.preventDefault();
    e.target.reset();
    this.props.dispatch(addExercise(this.state.newExercise));
  }

  updateDetails(e) {
    let newExercise = this.state.newExercise;
    newExercise[e.target.name] = e.target.value;
    this.setState({ newExercise });
  }
  render() {
    console.log("anything", this.props);
    return (
      <div className="form-container">
        <form onSubmit={this.handleSubmit.bind(this)}>
          <h2>Exercise Form</h2>
          <div className="form">
            <div>
              <label>Name of Exercise:</label>
              <input
                name="exe_name"
                type="text"
                onChange={this.updateDetails.bind(this)}
              />
            </div>
            <div>
              <label>Exercise Info:</label>
              <input
                name="exe_info"
                type="text"
                onChange={this.updateDetails.bind(this)}
              />
            </div>
            <div>
              <label>Exercise Url:</label>
              <input
                name="exe_url"
                type="text"
                onChange={this.updateDetails.bind(this)}
              />
            </div>
            <div>
              <label>Exercise Url2:</label>
              <input
                name="exe_url2"
                type="text"
                onChange={this.updateDetails.bind(this)}
              />
            </div>
            <div>
              <label>Comment:</label>
              <input
                name="comment"
                type="text"
                onChange={this.updateDetails.bind(this)}
              />
            </div>
          </div>
          <select name="plan_id" onChange={this.updateDetails.bind(this)}>
            <option>Enter plan details</option>
            {this.props.plans.map((plan, i) => {
              return <option value={plan.plan_id}>{plan.sets}</option>;
            })}
          </select>
          <input className="submit" type="submit" value="Submit" />
        </form>;
      </div>
    );
  }
}

const mapStateToProps = ({ plans }) => {
  return { plans };
};

export default connect(mapStateToProps)(CreateExercise);

这里是App组件，它被调用。

import React from "react";
import { HashRouter as Router, Route } from "react-router-dom";
import { connect } from "react-redux";
import { getExercises } from "../actions/exercises";
import { getPlansRequest } from "../actions/plansActions";
import ExerciseList from "./ExerciseList";
import Header from "./Header";
import CreateExercise from "./CreateExercise";
import Single from "./Single";
import About from "./About";
import Home from "./Home";
import CreatePlan from "./CreatePlan";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showExerciseForm: false,
      showPlanForm: false,
    };
  }

  componentDidMount() {
    this.props.dispatch(getPlansRequest());
    this.props.dispatch(getExercises());
  }

  toggleForm(e) {
    this.setState({ [e.target.name]: !this.state[e.target.name] });
  }

  render() {
    return (
      <Router>
        <div className="app-container">
          <div className="sidebar pure-u-1 pure-u-md-1-4">
            <Header />
          </div>
          <Route
            exact
            path="/"
            component={() => (
              <button
                name="showExerciseForm"
                onClick={this.toggleForm.bind(this)}
              >
                {this.state.showExerciseForm ? "Cancel" : "Create Exercise"}
              </button>
            )}
          />

          {this.state.showExerciseForm && (
            <Route exact path="/" component={CreateExercise} />
          )}

          <Route
            exact
            path="/"
            component={() => (
              <button name="showPlanForm" onClick={this.toggleForm.bind(this)}>
                {this.state.showPlanForm ? "Cancel" : "Create Plan"}
              </button>
            )}
          />
          {this.state.showPlanForm && (
            <Route exact path="/" component={CreatePlan} />
          )}

          <Route exact path="/exercises" component={ExerciseList} />
          <Route
            exact
            path="/exercises/:id"
            component={props => <Single {...props} />}
          />
          <Route path="/about" component={About} />
          <Route path="/" component={Home} />
        </div>
      </Router>
    );
  }
}

export default connect()(App);

Answer 1

您必须在路径中发送一些道具才能在组件中获取它们

在App组件中

{this.state.showExerciseForm && (<Route exact path="/" foobar="Something" component={CreateExercise} />)}

在CreateExercise中获取道具

this.props.foobar