为什么我的组件没有有效地接收道具？

Question

我不断收到一条消息，说明我尝试通过道具访问的项目未定义。你能告诉我为什么它不起作用吗？

这里是道具试图传递的实例......我特别谈论的是tellus和yourTrial道具。

import React from 'react'
import Info from './components/Info'
import Upsell from '../../../general/components/order/components/Upsell'
import FormTwo from '../../../general/components/forms/FormTwo'
import Footer from '../../../cbd-desktop/components/layout/Footer'


export default class Order extends React.Component {
  render() {
    return (
     <div>
      <div>
    <div style={styles.header}>
      <img style={styles.leaf} src="./resources/desktop-img/leaves_top.png" />
      <img style={styles.logo} src="./resources/desktop-img/logo_white.png" />
    </div>
    <div style={styles.wrapper}>
      <div style={styles.leftWrapper}>
        <Info />
        <Upsell styles={upsellStyles} />
      </div>
        <FormTwo styles={formStyles} tellus="Tell us where to send" yourTrial="YOUR TRIAL BOTTLE"} />
      </div>
  </div>
  <Footer style={styles.footer}/>
</div>
)
 }
}

这里是我试图在孩子身上显示这些值...在两个h2s中向顶部显示

import React from 'react'
import { connect } from 'react-redux'
import { stepTwoSubmit, saveBillingData } from 
'../../actions/formStepTwoActions'
import { addReceiptProduct } from '../../actions/receiptActions'
import FormTwoInputs from './components/FormTwoInputsComponent.jsx'
import Throbber from '../throbber/Throbber'
import FormWarning from './components/FormWarningComponent.jsx'
import Button from '../../../cbd-desktop/components/layout/Button'

const mapStateToProps = state => ({
  state:state,
  config:state.config,
  downsellProduct:state.downsell.downsellProduct || {},
  receiptProducts:state.receipt.receiptProducts || []
})
const mapDispatchToProps = {
  stepTwoSubmit,
  saveBillingData,
  addReceiptProduct
}

@connect(mapStateToProps, mapDispatchToProps)
export default class FormTwo extends React.Component {
  constructor(props) {
    super(props)


  componentWillReceiveProps(nextProps) {
    let formTwoResponse = nextProps.state.stepTwo.formTwoResponse

    this.checkOrderStatus(formTwoResponse)
  }
  componentDidMount() {
    this.fillMainOrder()
    this.calculateViewers()
    this.calculateTimer()
  }


  render() {
    let { state, props, inputs, onInputFocus, saveInputVal, styles } = this,
         CustomTag = props.labels ? 'label' : 'span',
        { submitting, formWarning } = state,
        { invalidInputID, text, visible } = formWarning


     return (
      <div style={styles.formWrapper}>
        <p style={styles.yellowBanner}>{this.state.viewers} people viewing this product right now</p>
          <div style={styles.formInnerWrapper}>
            <div style={styles.headerWrapper}>
              <h2 style={styles.header}>{this.props.tellus}</h2>
              <h2 style={styles.header}>{this.props.yourTrial}</h2>
           </div>
            <div style={styles.weAccept}>
              <p style={styles.weAcceptText}>We Accept:</p>
               <img style ={styles.cardImage} src="resources/desktop-img/cards.png" />
            </div>
            <form onSubmit={this.submit}>
              <FormTwoInputs onInputFocus={onInputFocus} saveInputVal={saveInputVal} CustomTag={CustomTag} styles={styles} />

              <FormWarning visible={visible} invalidInputID={invalidInputID} text={text} />
              <Button style={styles.button} buttonText="RUSH MY TRIAL" />
            </form>
          </div>
           <img src="resources/desktop-img/secure.png" />
            <div style={styles.urgencyWrapper}>
              <div style={styles.urgencyTextWrapper}>
                <span style={styles.redText}>{this.state.viewers} people are viewing this offer right now -</span>
                <span style={styles.blueText}>{this.state.counter}</span>
              </div>
              <p style={styles.blueText}>Claim Your Bottle Now</p>
           </div>
        <Throbber throbberText='Confirming your shipment...' showThrobber={submitting} />
      </div>
    )
  }
}