状态未定义，当我 setState() 内部组件确实挂载时答案

【问题标题】：State is undefined, when I setState() inside component did mount状态未定义，当我 setState() 内部组件确实挂载时
【发布时间】：2021-06-07 09:55:30
【问题描述】：

我是新来的反应并且在从组件中的firebase获取数据后无法设置状态确实挂载功能，不断收到错误联系未在组件内部定义并挂载。

constructor(props) {
    super(props);
    this.state = {
        contacts: [
            { name: 'sachin', number: '445343' },
            { name: 'nihil', number: '33335555' },
            { name: 'chicken', number: '434355' },
        ]
    }
    this.componentDidMount = this.componentDidMount.bind(this);
}


componentDidMount = () => {

        let currentComponent = this;
        fire.auth().onAuthStateChanged(function (user) {
            if (user) {
                console.log(user.uid)
                var uid = user.uid;
                db.collection(uid)
                    .get()
                    .then((querySnapshot) => {
                        const contacts = querySnapshot.forEach((doc) => {
                            const data = doc.data()
                            contacts.push(data)
                        })
                        console.log(contacts)
                        this.setState({contacts});
                    });

            } else {
                // No user is signed in.
            }

        });
    }

【问题讨论】：

标签： javascript reactjs firebase jsx

【解决方案1】：

试试这个！

constructor(props) {
    super(props);
    this.state = {
        contacts: [
            { name: 'sachin', number: '445343' },
            { name: 'nihil', number: '33335555' },
            { name: 'chicken', number: '434355' },
        ]
    }
    this.componentDidMount = this.componentDidMount.bind(this);
}


componentDidMount = () => {

        let currentComponent = this;
        fire.auth().onAuthStateChanged(function (user) {
            if (user) {
                console.log(user.uid)
                var uid = user.uid;
                db.collection(uid)
                    .get()
                    .then((querySnapshot) => {
                        const contacts = [];
                        querySnapshot.map(item => contacts .push(item.data));
                        this.setState({contacts});
                    });

            } else {
                // No user is signed in.
            }

        });
    }

【讨论】：

它说 querySnapshot.map 无效
你确定这个“querySnapshot”是一个数组吗？

【解决方案2】：

首先你不应该在constructor中绑定componentDidMount方法

第二，你在初始化之前推入contacts。所以试试下面的方法：-



componentDidMount() {
        fire.auth().onAuthStateChanged((user) => {
            if (user) {
                console.log(user.uid)
                var uid = user.uid;
                db.collection(uid)
                    .get()
                    .then((querySnapshot) => {
                        const contacts = [];  // initialize contants here
                        querySnapshot.forEach((doc) => {
                            contacts.push(doc.data())
                        })
                        console.log(contacts)
                        this.setState({contacts});
                    });

            } else {
                // No user is signed in.
            }

        });
    }

【讨论】：

仍然无法读取未定义的属性 setState
您是否从任何地方拨打componentDidMount？您是否将 componentDidMount 从箭头函数转换为普通函数？您是否从构造函数中删除了 bind this to componentDidMount？
我删除了绑定并将调用放在另一个 getdata() 函数中，并将其放在 componeneDidMount 中，并绑定了该 getdata() 函数。
我不明白你为什么需要从其他函数调用componentDidMount？ componentDidMount 将在第一次使用当前组件挂载时调用。
兄弟，它成功了，我将获取用户 ID 函数放在 componentDidMount 中，然后调用另一个 getData 函数

【解决方案3】：

   

 componentDidMount() {
    var user = fire.auth().currentUser;

    if (user) {
        console.log(user.uid)
        var uid = user.uid;
    } else {
    // No user is signed in.
    }
    console.log('comp: ' + uid)
    this.getData(uid);
}                                                                                     
 getData = (e) => {

           db.collection(e)
                .get()
                .then((querySnapshot) => {
                    const contacts = [];  // initialize contants here
                    querySnapshot.forEach((doc) => {
                        contacts.push(doc.data())
                    })
                    console.log(contacts)
                    this.setState({contacts});
                });

}     ```  this worked I think putting the fire.auth().currentuser inside getData function did not let it set the state .

【讨论】：