javascript - 无法读取未定义的“消息”的属性

Question

我有一个监听 Firebase 数据库变化的监听器。消息写入 Firebase，但每当我尝试通过侦听器更新本地状态时，它都会返回Cannot read property 'messages' of undefined.

代码错误

App.js 的第 122-125 行

Github：https ://github.com/kingdomwilks/Slack2

错误信息：

无法读取未定义的属性“消息”。

我已经控制台记录了侦听器返回的对象，它似乎是一个数组。

Firebase 监听器

firebasePeopleListener = () => {
    database().ref('people/').on('value', (snapshot) => {
        let people = snapshot.val();
        console.log(people);
        this.setState({
            people: people
        });
    });
}

错误出现在这里

render() {
console.log(this.state);
let messages = [];
let isSomethingSelected = false;

if(this.state.selectedPersonId) {
    messages = this.state.people[this.state.selectedPersonId - 1].messages;
    isSomethingSelected = true;
}

标签： javascriptreactjsfirebasefirebase-realtime-database

Answer 1

从您的数据库返回的people数组返回的人员列表的第一个值为empty，因此当您尝试访问时this.state.people[0]，它不会在那里找到任何东西并且会抛出错误。

这里似乎有关于为什么 Firebase 集合似乎以空行开头的讨论。

但是，您可以更改您firebasePeopleListener的输入App.js并过滤掉响应以仅添加到具有id集合的状态的人。

firebasePeopleListener = () => {
        database().ref('people/').on('value', (snapshot) => {
            let people = snapshot.val();
            let updatedPeople = [];

            for(let i in people) {
                if(people.hasOwnProperty(i) && people[i].id) {
                    updatedPeople.push(people[i]);
                }
            }
            this.setState({
                people: updatedPeople
            });
        });
    };

现在应该可以解决您的问题。