[英]why isn't my array being rendered on my page?
I am trying to render listed property information from an array of objects.我正在尝试从一组对象中呈现列出的属性信息。 I used this method in another part of my project with success, but in this instance, I am not getting anything at all.
我在项目的另一部分成功地使用了这种方法,但在这种情况下,我什么也没得到。
here is the code I have这是我的代码
import { database } from "../../components/firebase";
import { ref, child, get } from "firebase/database";
import { useState, useEffect } from "react";
export default function Dashboard() {
const dbRef = ref(database);
const [users, setUsers] = useState([]);
const array = [];
const getData = () => {
get(child(dbRef, "users/"))
.then((snapshot) => {
const data = snapshot.val();
setUsers(data);
})
.catch((err) => {
console.log(err);
});
};
const getProperties = () => {
Object.values(users).forEach((user) => {
Object.values(user?.properties).forEach((property) => {
array.push(property);
console.log(property);
});
});
console.log(array);
};
useEffect(() => {
getData();
getProperties();
}, [dbRef]);
return (
<>
<div>Properties </div>
<div>
{array.map((property) => (
<div key={property.property_id}>
<h1>{property?.property_name}</h1>
<p>{property?.description}</p>
<p>{property?.rooms}</p>
<p>{property?.phone}</p>
</div>
))}
</div>
<p>oi</p>
</>
);
}
Nothing happens, it only prints "properties" and "oi"没有任何反应,它只打印“properties”和“oi”
getData
is asynchronous. getData
是异步的。 When you execute getProperties
, your users
state will still be its initial, empty array value.当您执行
getProperties
时,您的users
state 仍将是其初始的空数组值。
You don't appear to be using users
for anything else but assuming you want to keep it, the easiest way to drive some piece of state ( array
) from another ( users
) is to use a memo hook .您似乎没有将
users
用于其他任何事情,但假设您想保留它,从另一个( users
)驱动一些 state( array
)的最简单方法是使用备忘录挂钩。
// this is all better defined outside your component
const usersRef = ref(database, "users");
const getUsers = async () => (await get(usersRef)).val();
export default function Dashboard() {
const [users, setUsers] = useState({}); // initialise with the correct type
// Compute all `properties` based on `users`
const allProperties = useMemo(
() =>
Object.values(users).flatMap(({ properties }) =>
Object.values(properties)
),
[users]
);
// Load user data on component mount
useEffect(() => {
getUsers().then(setUsers);
}, []);
return (
<>
<div>Properties </div>
<div>
{allProperties.map((property) => (
<div key={property.property_id}>
<h1>{property.property_name}</h1>
<p>{property.description}</p>
<p>{property.rooms}</p>
<p>{property.phone}</p>
</div>
))}
</div>
<p>oi</p>
</>
);
}
The memo hook will recompute allProperties
any time users
is changed.每当
users
更改时,备忘录挂钩将重新计算allProperties
。
If you don't need the users
state, then there's not much need for the memo hook.如果您不需要
users
state,那么就不需要备忘录挂钩。 Instead, just maintain the state you do need相反,只需维护您确实需要的 state
const [allProperties, setAllProperties] = useState([]); // init with empty array
useEffect(() => {
getUsers().then((users) => {
setAllProperties(
Object.values(users).flatMap(({ properties }) =>
Object.values(properties)
)
);
});
}, []);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.