为this.props.data获取未定义

Question

当我通过从上一个组件中设置this.props.data this.state this.props.data来传递它时，一直没有为它定义它。

下面是正确传递数据和呈现的jobOffer组件：

const JobOffer = React.createClass({
  mixins: [Navigation],

  getInitialState: function() {
    console.log(this.props.data);
    return {
        listing: this.props.data
    };
  },

  componentDidMount: function() {
    AppStore.addChangeListener(this._onChange);
  },


    _onChange : function(){
      this.setState({listingDetail:this.state.listing});
    },


  handleClick: function () {
    this.transitionTo('/listing/' + this.state.listing.id );
  },


  render: function () {
      var data = this.state.listing;
      var employmentType;
      switch(data.employment_type) {
        case 'F':
            employmentType = 'Full Time';
            break;
        case 'P':
            employmentType = 'Part Time';
            break;
        case 'H':
            employmentType = 'Hourly';
            break;
        default:
            employmentType = 'Unknown';
      }
      return (
        <a onClick={this.handleClick}>
            <img style={{width: 50+'px', height: 50+'px'}} src="images/job1.jpg" alt="" className="img-circle" />
            <div className="title">
                <h5>{data.job_title}</h5>
                <p>{data.Business.business_name}</p>
            </div>
            <div className="data">
                <div ><i>Posted 1 Day Ago</i></div>
                <div className="city"><i className="fa fa-map-marker"></i>{data.Business.business_city}</div>
                <div className="type full-time"><i className="fa fa-clock-o"></i>{employmentType}</div>
                <div className="sallary"><i className="fa fa-dollar"></i>{data.job_compensation}</div>
            </div>
        </a>

      );
    },

});


module.exports = JobOffer;

您可以看到，当listingDetail通过_onChange时，我正在传递。下面是给出未定义错误的jobDetails组件。

var React = require('react');
var ReactBootstrap = require('react-bootstrap');
var Button = ReactBootstrap.Button;
var Modal = ReactBootstrap.Modal;
var AppActions = require('../actions/app-actions');
var AppStore = require('../stores/app-store');
var Navigation = require('react-router').Navigation;
var _ = require('lodash');

var JobOffer = require('./JobOffer');


// Our custom component is managing whether the Modal is visible
const ListingDetail = React.createClass({
  mixins: [Navigation],

  getInitialState: function() {
    console.log(this.props.data);
    return {
        ListingDetail: this.props.data
    };
  },

  componentDidMount: function() {
    AppStore.addChangeListener(this._onChange);
  },


  _onChange : function(){

  },


  handleClick: function () {
    this.transitionTo('/listing/apply/' + this.state.ListingDetail.id );
  },


  render: function () {
      var data = this.state.ListingDetail

      return (
            <img style={{width: 200+'px', height: 200+'px'}} src="images/job1.jpg" alt="" className="img-circle" />
            <div className="title">
                <h5>{data.job_title}</h5>
                <p>{data.Business.business_name}</p>
            </div>
                <div className="city"><i className="fa fa-map-marker"></i>{data.Business.business_city}</div>
                <div className="type full-time"><i className="fa fa-clock-o"></i>{employmentType}</div>
                <div className="sallary"><i className="fa fa-dollar"></i>{data.job_compensation}</div>

            <div className="container">
              <div className="row">
                <div className="col-sm-8">
                  <h3></h3>

                  <article>
                    <h2>Job Details</h2>
                    <p>{data.job_description}</p>

                  </article>
                </div>

      );
    },

});


module.exports = ListingDetail;

有什么想法吗？

Answer 1

我看不出JobOffer和ListingDetail在任何地方都没有呈现。哪个组件将呈现哪个组件？

任何组件的this.props属性都将包含在呈现时传递给组件的任何属性(或者更确切地说，在React的组件生命周期术语中“挂载”)。它不打算在组件的生命周期内发生变异，所以您可以将它们视为“初始化”值。另一方面，组件的this.state属性应该包含在整个组件生命周期中确实发生更改的属性，并且每次通过使用this.setState()更改组件时，组件都将被重新呈现(除非在this.shouldComponentUpdate方法中阻止重新呈现)以反映新的状态。

因此，this.props包含在挂载组件时作为“属性”传递的任何值。如果使用JSX，它可能如下所示：

var Parent = React.createClass({
    render: function() {
        return <DetailsListing id={123} job_title="React Dev" />;
    }
});

在这种情况下，DetailsListing的this.props.id是123，this.props.job_title是预期的"React“。

通过将道具作为初始状态返回，您似乎混淆了状态和道具之间的区别。道具应该是道具，状态应该是状态，而不是混合(这可能是自以为是的，但我认为这绝对是反应原则所要求的)。无论哪种方式，this.props都只包含呈现/挂载时传递给它的值。