在多步驟注冊表單中使用react-router時出錯

Question

在我工作的多步驟注冊表單中實現React Router時出現錯誤。 當我單擊個人信息鏈接時，控制台上顯示錯誤消息

"Uncaught TypeError: Cannot read property 'ownerName' of undefined"
"Uncaught TypeError: Cannot read property '_currentElement' of null".

當我單擊“位置”時出現類似錯誤，而不是ownerName，但在"'city' of undefined" city'of "'city' of undefined"上出現錯誤。 可能是什么原因？

更新： “反應”：“ ^ 0.14.7”和“反應路由器”：“ ^ 2.0.0”

我的密碼

Index.js（入口點）

import React from 'react'; 
import {render} from 'react-dom'; 
import { Router, Route, IndexRoute, hashHistory } from 'react-router';
import assign from 'object-assign';

import Layout from './components/Layout';

let fieldValues = {
  ownerName:'',
  email:'',
  phoneNumber:'',
  city     : '',
  place    : ''
}


class AddRent extends React.Component{
 constructor(props,context) {
        super(props,context);
        this.state = {
            step: 1
        };
    }

  saveValues(field_value) {
    return function() {
      fieldValues = Object.assign({}, fieldValues, field_value)
    }()
    console.log('fieldValues are', fieldValues);
  }


  nextStep(step) {
    var step = this.state.step;
    var newStep = step+1;
    this.setState({step:newStep});
  }

  previousStep(step) {
    var step = this.state.step;
    var newStep = step-1
    this.setState({
      step : newStep
    });
  }


  showStep() {
  switch (this.state.step) {
    case 1:
      return <RenderPersonalInfo fieldValues={fieldValues}
                            nextStep={this.nextStep.bind(this)}
                            previousStep={this.previousStep.bind(this)}
                            saveValues={this.saveValues.bind(this)} />
    case 2:
      return <RenderLocation fieldValues={fieldValues}
                           nextStep={this.nextStep.bind(this)}
                           previousStep={this.previousStep.bind(this)}
                           saveValues={this.saveValues.bind(this)} />
  }
}

  render() {
    var style = {
      width : (this.state.step / 2 * 100) + '%',
      backgroundColor:'#000'
    }

    return (
      <main>
        <span className="progress-step">Step {this.state.step}</span>
        <progress className="progress" style={style}></progress>
        {this.showStep()}
      </main>
    )
  }
}

class RenderPersonalInfo extends React.Component{
  render(){
    return(
            <div>
              <h3>Personal Information</h3>
              <p className="subtitle">Provide your authentic information so rent seekers can contact you</p>
              <hr/>
              <div className="col-md-4">
                <label htmlFor='name'>Owner Name</label>
                <input ref="name" defaultValue={this.props.fieldValues.ownerName} type="textbox" className="form-control" id="name" placeholder="Owner name" />
              </div>
              <div className="col-md-4">
                <label htmlFor="email">Email</label>
                <input ref="email" defaultValue={this.props.fieldValues.email} type="email" className="form-control" id="email" placeholder="email" />
              </div>
              <div className="col-md-4">
                <label htmlFor="phoneNumber">Phone Number</label>
                <input ref="phone" defaultValue={this.props.fieldValues.phoneNumber} type="textbox" className="form-control" id="phoneNumber" placeholder="phone number" />
              </div>
              <hr/>
                <div className="row continueBtn text-right">
                    <button className="btn how-it-works" ref="personalInfo" onClick={this.nextStep.bind(this)}>Continue</button>
                </div>
            </div>
      );
  }
  nextStep(step){
     var data = {
          ownerName  : this.refs.name.value,
          email : this.refs.email.value,
          phoneNumber: this.refs.phone.value,
        }
        console.log(data.ownerName);
        if ((data.ownerName)&&(data.email)&&(data.phoneNumber)) {
          this.props.saveValues(data);
          this.props.nextStep();
        }
        else{
          alert('please enter the name, email and phone number');
        }
  }
}



class RenderLocation extends React.Component{
    render(){
        return(
            <div>
                <h3>Help guests find your place</h3>
                <p className="subtitle">will use this information to find a place that’s in the right spot.</p>
                <hr/>
                <div className="col-md-6">
                    <label htmlFor="city">City</label>
                    <input ref="city" defaultValue={this.props.fieldValues.city} type="textbox" className="form-control" id="city" placeholder="Biratnagar" />
                </div>
                <div className="col-md-6">
                    <label htmlFor="placeName">Name of Place</label>
                    <input ref="place" defaultValue={this.props.fieldValues.place} type="textbox" className="form-control" id="placeName" placeholder="Ganesh Chowk" />
                </div><hr/>
                <div className="row continueBtn">
                    <button className="btn how-it-works pull-left" onClick={this.props.previousStep.bind(this)}>Back</button>
                    <button className="btn how-it-works pull-right" onClick={this.nextStep.bind(this)}>Continue</button>
                </div>
            </div>
            );
    }

     nextStep(step){
        var data = {
          city  :this.refs.city.value,
          place :this.refs.place.value,
        }
        if ((data.city)&&(data.place)) {
          this.props.saveValues(data);
          this.props.nextStep();
        }
        else{
          alert('please enter the name of city and place');
        }

    }

}

render(
        <Router history={hashHistory}>
            <Route path="/" component={Layout}>
                <Route path="personal" component={RenderPersonalInfo}></Route>
                <Route path="location" component={RenderLocation}></Route>
            </Route>
        </Router>,document.getElementById('app')
    );

Layout.js

import React from 'react';
import { Link } from 'react-router';

export default class Layout extends React.Component {

  render() {
    return (
      <div className="container-fluid">
        <h1>I am Layout</h1>
        <div className="row">
          <div className="col-sm-4">
            <ul className="list-group">
              <li className="list-group"><Link to="personal">Personal Info</Link></li>
              <li className="list-group"><Link to="location">Location</Link></li>
            </ul>
          </div>
          <div className="col-sm-8">
            {this.props.children}
          </div>
        </div>
      </div>
    );
  }
}

Answer 1

您正在閱讀this.props.fieldValues.city從等少數值this.props在RenderLocation ，你從來沒有指定。 render()方法崩潰是因為this.props.fieldValues是undefined ，並且您會得到一些隱秘的錯誤。

始終查看第一個錯誤（由您的代碼引發）。

隨后的錯誤，例如

• "Uncaught TypeError: Cannot read property 'ownerName' of undefined"
• "Uncaught TypeError: Cannot read property '_currentElement' of null".

只是代碼拋出較早的異常后 ，React感到困惑的症狀。

用於指定這些道具的AddRent組件未在代碼中的任何地方使用。 由於router使用路由器配置來創建組件，因此不會為它們提供任何自定義道具-您需要閱讀this.props.params提供的this.props.params並this.props.params找出當前step以及相關的fieldValues 。