首頁猿問如何將對象從 Firebase...

如何將對象從 Firebase 查詢推送到 this.state

JavaScript

墨色風雨 2022-01-01 21:12:23

我已經從 Firebase 中提取了數據。數據就在那里，因為 console.log 證實了這一點。(2) [{…}, {…}]0:id: 1.417253735436239name: {Jack: true}__proto__: Object1:id: 1.7540006580031215name: {Jack: true, Jill: true}__proto__: Objectlength: 2但是，我需要遍歷這些數據以列出名稱，但是當我嘗試將這些數據 setState 到一個數組中時（肯定是在構造函數中聲明的），我得到“無法設置未定義的屬性“setState”。這是帶有不起作用的 setList 函數的代碼：let users = []; listRef.on("value", function (snapshot) { users.push({ id: 1 + Math.random(), name: snapshot.val() }) console.log(users); }); function setList(users){ this.setState({ names: users}) } setList(); }); }Names 在構造函數中的 this.state 中被聲明為一個數組。我哪里錯了？

查看完整描述

2 回答

隔江千里

TA貢獻1906條經驗獲得超10個贊

我克服了錯誤。在塊內使用函數是錯誤的。我將 setState 從大括號中移出并且沒有該函數。

setName = e => {

e.preventDefault()

this.setState({ [e.target.name]: e.target.value })

let textBox = document.getElementById('inputDivId');

textBox.style.display = "flex";

let messagesBox = document.getElementById('messagesDivId');

messagesBox.style.display = "flex";

let thinkDel = document.getElementById('options');

thinkDel.style.display = "flex";

let nameBox = document.getElementById('nameDivId');

nameBox.style.display = "none";

// Add ourselves to presence list when online.

let name = this.state.name;

// let names = this.state.names;

let connectedRef = firebase.database().ref('.info/connected');

// let users = [];

connectedRef.on('value', function (snap) {

if (snap.val() === true) {

const con = listRef.child(name);

con.onDisconnect().remove();

con.set(true);

}

let users = [];

listRef.on("value", function (snapshot) {

users.push({

id: 1 + Math.random(),

})

setList(users);

});

function setList(users) {

this.setState({

names: users

})

}

});

}

但是我仍然沒有根據需要獲取 this.state.names 中的數據！

反對回復 2022-01-01

青春有我

TA貢獻1784條經驗獲得超8個贊

數據從 Firebase 異步加載。在加載數據時，主代碼繼續運行。然后，當數據可用時，您的回調將被調用。

通過放置一些日志語句最容易看到這一點：

console.log("Before attaching listener");

listRef.on("value", function (snapshot) {

console.log("Got data");

});

console.log("After attaching listener");

當您運行此代碼時，它會記錄：

在附加偵聽器之前

附加監聽器后

得到數據

這可能不是您所期望的，但這實際上是定義的行為。它還解釋了為什么您的代碼不起作用：到您調用時，this.setState({ names: users })您的回調尚未運行，并且users是空的。

因此，任何需要數據庫數據的代碼都必須在回調中，或者從那里調用。在 ReactJS 的情況下，它非常簡單：您只需setState從回調中調用：

let users = [];

listRef.on("value", function(snapshot) {

users.push({

id: 1 + Math.random(),

})

setList(users);

});

function setList(users) {

this.setState({

names: users

})

}

我不完全確定數據結構是什么listRef樣的，但懷疑您實際上正在尋找這個：

listRef.on("value", function(snapshot) {

let users = [];

snapshot.forEach(function(user) {

users.push({

id: snapshot.key,

})

});

setList(users);

});

反對回復 2022-01-01

2 回答
0 關注
135 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何將對象從 Firebase 查詢推送到 this.state

如何將對象從 Firebase 查詢推送到 this.state

2 回答

添加回答