未定义 this.props.data

Question

当我通过从最后一个组件设置 this.state this.props.data 传递 this.props.data 时，我不断得到 undefined。

这里是正确传递数据和渲染的 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;

你可以看到我在_onChange时传递了listingDetail。这是给出未定义错误的 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 Dev”，正如预期的那样。

您似乎混淆了 state 和 props 之间的区别，因为它们将 props 作为初始状态返回。道具应该是道具，状态应该是状态，而不是混合（这可能是固执己见，但我认为这绝对是 React 原则的强制要求）。无论哪种方式，this.props 只会包含您在渲染/安装时传递给它的值。