Question

当我通过从最后一个组件设置this.state this.props.data传递它时，我继续为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;

你可以看到我在_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的{{1}}为123，this.props.id为“React Dev”。

您似乎通过将道具作为初始状态返回来混淆州和道具之间的区别。道具应该是道具，国家应该是国家，而不是混合（这可能是固执己见，但我认为它肯定是由React原则强制执行的）。无论哪种方式，this.props.job_title都只包含渲染/装载时传递的值。

为this.props.data获取未定义的内容

1 个答案: