我正在使用 react-firebase-hooks https://github.com/CSFrequency/react-firebase-hooks/tree/v4.0.2/database#full-example
以下是當我執行 console.log(v.val()) 時回傳的值，當我執行 console.log(v.val().name) 時，它是未定義的。
{
1: { id: 1, name: "bob", status: "student" }
2: { id: 2, name: "sam", status: "student" }
}
當我嘗試渲染上述資料時。我收到錯誤 Objects are not valid as a React child。如果您打算渲染一組孩子，請改用陣列。
import { ref, getDatabase } from 'firebase/database';
import { useList } from 'react-firebase-hooks/database';
const database = getDatabase(firebaseApp);
const DatabaseList = () => {
const [snapshots, loading, error] = useList(ref(database, 'list'));
return (
<div>
<p>
{error && <strong>Error: {error}</strong>}
{loading && <span>List: Loading...</span>}
{!loading && snapshots && (
<React.Fragment>
<span>
List:{' '}
{snapshots.map((v) => (
<React.Fragment key={v.key}>{v.val()}, </React.Fragment>
))}
</span>
</React.Fragment>
)}
</p>
</div>
);
};
如何正確呈現我的資料？
uj5u.com熱心網友回復：
那是因為v.val()是物件的物件，并且當您對 感興趣時name，您需要獲取第一個物件的值，然后通過它進行映射，從而訪問name.
import { ref, getDatabase } from 'firebase/database';
import { useList } from 'react-firebase-hooks/database';
const database = getDatabase(firebaseApp);
const DatabaseList = () => {
const [snapshots, loading, error] = useList(ref(database, 'list'));
return (
<div>
<p>
{error && <strong>Error: {error}</strong>}
{loading && <span>List: Loading...</span>}
{!loading && snapshots && (
<span>
List:{' '}
{snapshots.map((v,i) => (
Object.values(v.val()).map((obj,j) =>
<span key={i j}>{obj.name}, </span>
)
))}
</span>
)}
</p>
</div>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/428769.html
標籤：javascript 反应 火力基地 firebase-实时数据库
上一篇：創建用戶之前的電子郵件驗證