Getting undefined for this.props.data

Getting undefined for this.props.data

本文关键字：props data this for undefined Getting      更新时间：2023-09-26

当我通过设置this传递它时，我一直未定义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;

你可以看到，我传递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;

任何想法?

我没有看到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将只包含您在渲染/安装时传递给它的值。

相关文章：