Javascript 如何在类组件中瞄准道具

我正在制作一个多步骤表格。 在最后一页，我试图将所有数据推送到firebase。 我使用道具和状态将值从一页传递到另一页。 不幸的是，我不知道如何定位值和最后一页。 （我正在使用MaterialUI）

错误：

FirebaseError:使用无效数据调用函数addDoc（）。不支持的字段值：未定义（在文档usern/9ORMDRXjMCqTqNHRIsM7中的字段firstName中找到）

这是我代码的重要部分

From.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}
        />

导出类UserForm扩展组件{
状态={
步骤：1，
名字：''，
姓氏：“”，
电子邮件：“”，
占用：''，
城市：''，
简历：''
}
render（）{
const{step}=this.state；
const{firstName，lastName，email，occupuation，city，bio}=this.state
常量值={firstName，lastName，email，occupuation，city，bio}
开关（步骤）{。。。。。。
案例3：
返回(

共同确认页面

           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}
                  />

导出类确认扩展组件{
SendData=（e）=>{
e、 预防默认值（）；
db.collection（'usern'）。添加(
{
名字：this.props.firstName，
lastName:this.props.lastName，
电子邮件：this.props.email，
职业：这个。道具。职业，
城市：这个。道具。城市，
bio:this.props.bio，
时间戳：firebase.firestore.FieldValue.serverTimestamp（），
}
)
}
render（）{
常量值：{firstName，lastName，email，职业，
城市，bio}}=this.props
......

将

发送数据

功能更改为：

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

---

Confirm

组件不会自动获取所有

UserForm

道具，当前您正在使用

值

道具传递数据，以便您可以使用它获取所需的数据：

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

---

你能显示完整的组件代码吗？从你的代码判断应该是

firstName:this.props.values.firstName

等（或者

.add（this.props.values）

）上帝保佑你，乐意帮助你：）上帝保佑你