javascript - 如何在类组件中定位 Prop

Question

我正在构建一个多步骤表单。
在最后一页，我试图将所有数据推送到 firebase。
我正在使用 Prop 和状态在页面之间传递值。
不幸的是，我不知道如何定位值和最后一页。
(我正在使用 MaterialUI)
错误:
FirebaseError:使用无效数据调用的函数 addDoc()。不支持的字段值:未定义(在文档 usern/9ORMDRXjMCqTqNHRIsM7 的字段 firstName 中找到)
那是我代码的导入部分
来自.js

 export class UserForm extends Component {

state = {
    step: 1,
    firstName: '',
    lastName: '',
    email: '',
    occupuation: '',
    city: '',
    bio: ''
}

  render() {

    const { step } = this.state;
    const { firstName, lastName, email, occupuation, city, bio } = this.state
    const values = { firstName, lastName, email, occupuation, city, bio }

    switch (step) { ......
       
               case 3:
         return   (
            <Confirm
            nextStep={this.nextStep}
            prevStep={this.prevStep}
            values={values}
        />

确认页面

           export class Confirm extends Component {

         SendData = (e) => {
            e.preventDefault();
                db.collection('usern').add(
                    {
                  firstName: this.props.firstName,
                 lastName:this.props.lastName,
                  email:this.props.email,
                 occupation: this.props.occupation,
                 city: this.props.city,
                  bio: this.props.bio,
                 timestamp: firebase.firestore.FieldValue.serverTimestamp(),
        
    }
    )
}


    render() {

    const {values:{firstName, lastName, email, occupation, 
    city, bio}} = this.props

   ......
    <RaisedButton  
                label="Confrim"
                primary={true}
                style={styles.button}
                onClick={this.SendData}
                  />

Answer 1

Confirm组件没有得到所有 UserForm props 自动，目前您正在使用 values 传递数据props 以便您可以使用它来获取所需的数据:

     SendData = (e) => {
                e.preventDefault();
                    db.collection('usern').add(
                        {
                          firstName:  this.props.value.firstName
                             ...
                         }