React.js, как правильно использовать функцию map() для отображения данных?
Я пытаюсь отображать пользовательские данные на одной из моих страниц в электронном приложении. Я получаю данные из firebase/firestore, а затем помещаю их в массив, затем я хочу отобразить эти данные в таблице, но мне не удается отобразить данные на странице.
Вот мой код:
function Home() {
const [allUsers] = useState([]);
useEffect(() => {
const fetchData = async () => {
try {
const querySnapshot = await getDocs(collection(db, 'users'));
let allDocs = [];
querySnapshot.forEach((doc) => {
allDocs.push({ ...doc.data(), id: doc.id });
});
for (const item of allDocs) {
allUsers.push(item);
}
} catch (err) {
console.log(err);
}
console.log(allUsers)
};
fetchData();
}, []);
return <div className="home">
{Object.keys(allUsers).map((keyName) => (
<p>{allUsers[keyName].firstname}</p>
))}
</div>;
}
Вот как выглядят данные:
Ответы 3
Вы должны использовать установщик состояния для обновления allUsers. Вы мутируете данные (паттерн антиреакта). Попробуйте сделать так (я добавил комментарии в код):
function Home() {
const [allUsers, setAllUsers] = useState([]); // line I changed
useEffect(() => {
const fechedUsers =[]; // line I added
const fetchData = async () => {
try {
const querySnapshot = await getDocs(collection(db, 'users'));
let allDocs = [];
querySnapshot.forEach((doc) => {
allDocs.push({ ...doc.data(), id: doc.id });
});
for (const item of allDocs) {
fechedUsers.push(item);
}
} catch (err) {
console.log(err);
}
setAllUsers(fechedUsers) // line I added
};
fetchData();
}, []);
// lines I changed
return <div className="home">
{allUsers.map(user => <p>{user.firstname}</p>)}
</div>;
}
В настоящее время вы используете Object.keys() для отображения массива. Когда вы используете эту функцию, вы получаете массив со всеми индексами вне массива. Это означает, что вы получите массив данных [0, 1, ... ] в зависимости от длины данных.
Но поскольку вы используете массив, вы можете сразу отображать все объекты в массиве. Как это:
return <div className="home">
{allUsers.map((user) => (
<p>{user.firstname}</p>
))}
</div>
Пользовательская переменная будет объектом, который вы поместили в массив allUsers. Вы также должны использовать установщик состояния, например useState
Вам не нужно использовать индекс для повторения ответа. Когда вы используете функцию карты, вы получаете доступ к индексу в качестве параметра внутри функции карты и можете использовать его при необходимости.
return (
<div className="home">
{allUsers.map((user, index) => {
return(
<div key={index} className='user-data'>
//if you're using a table might need to change the `p` tag with `td` inside a `tr`
<p>{user.firstname} </p>
</div>
)
}
)}
</div>);