Как отобразить список пользователей в React-Firebase
Я все еще изучаю React и пытаюсь сделать «приложение для обзора дизайна», в котором пользователи регистрируются как клиенты или дизайнеры и взаимодействуют друг с другом. Я создал систему авторизации и убедился, что при регистрации каждый пользователь получит также некоторые атрибуты в базе данных firebase. Поэтому в моей БД у меня есть путь «пользователи/», где каждый пользователь сохраняется с помощью uid.
Теперь я могу отобразить другую панель инструментов, если вы клиент или дизайнер. На панели управления моего клиента я просто хочу отобразить список дизайнеров (и, нажав на них, перейти к их проектам). Тем не менее, у меня так много проблем, пытаясь заставить этот материал работать!
В следующем коде я пытаюсь получить пользователей из базы данных и добавить их uid в массив. Позже я хочу использовать этот массив и отображать пользователей с этими uid.
import firebase from "firebase/app";
import "firebase/database";
export default function CustomerContent() {
const[designers, setDesigners] = useState([]);
function printUsers (){
var users = firebase.database().ref('/users/');
users.on('value', (snapshot)=>{
snapshot.forEach((user)=>{
console.info(user.key)
firebase.database().ref('/users/'+user.key).on('value', (snapshot)=>{
var role = snapshot.val().role
console.info(role)
if (role === 'designer'){
const newDesigners = [...designers, user.key];
setDesigners(newDesigners);
}
})
})
})
}
useEffect(() => {
printUsers();
console.info(designers);
}, [])
return (
<div>
designer list
</div>
)
}
Теперь проблема с этим кодом заключается в том, что:
- похоже, он запускает функции printUsers два раза при загрузке страницы
- массив пуст, однако, если я свяжу функцию с кнопкой (просто чтобы попробовать), кажется, что в массив добавляется только 1 uid, и всегда один и тот же (я понятия не имею, что происходит).
пс. console.info(user.key) и console.info(role) выводят правильную комбинацию роли пользователя
@SarunUK На самом деле я думаю, что он будет включать только идентификаторы, поскольку он начинает с пустого массива.
@SaruUK Я просто очень хочу показать дизайнеров. эта строка должна составлять массив идентификаторов дизайнеров + текущий идентификатор пользователя (если это дизайнер), поэтому, когда он перебирает пользователей, он будет генерировать массив со всеми идентификаторами дизайнеров.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это не глупый вопрос. Вот что я бы изменил (конечно, позже вы удалите console.infos). Трудно сказать, будет ли это работать идеально, не имея доступа к вашей базе данных для ее запуска, но, основываясь на моем последнем проекте react/firebase, я считаю, что это сработает.
Во-первых, вы ссылаетесь на /users/, когда вам нужны только /users. Я не уверен, имеет ли это значение, но я сделал это последним способом, и это сработало для меня.
Во-вторых, вы вызываете firebase больше, чем вам нужно. У вас уже есть необходимая информация с первого раза.
В-третьих, и это мало, но я бы не стал называть вашу функцию printUsers. Вы делаете больше, чем просто печатаете их — вы вызываете firebase (асинхронно) и устанавливаете состояние, что гораздо больше, чем просто вывод некоторых данных на консоль.
Наконец, я бы сохранил весь объект в части состояния ваших дизайнеров. Кто знает, что вы хотите показать? Вероятно, по крайней мере, их имя, затем, возможно, их местоположение, фон, значок и т. д. Вам нужно, чтобы все это было доступно в этом массиве, и, возможно, вы захотите переместить этот массив в редукцию позже, если вы приложение достаточно большой.
Я также добавил немного JSX внизу, который дает простой вывод того, что вы можете сделать с массивом дизайнеров для визуального аспекта вашего приложения.
import firebase from 'firebase/app';
import 'firebase/database';
export default function CustomerContent() {
const [designers, setDesigners] = useState([]);
function printUsers() {
var users = firebase.database().ref('/users');
users.on('value', (snapshot) => {
snapshot.forEach((snap) => {
const userObject = snap.val();
console.info(userObject);
const role = userObject['role'];
console.info(role);
if (role === 'designer') {
const newDesigners = [...designers, userObject];
setDesigners(newDesigners);
}
});
});
}
useEffect(() => {
printUsers();
console.info(designers);
}, []);
return (
<div>
<h2>The designer are...</h2>
<ul>
{designers.map((designerObject) => {
return <li>{designerObject.name}</li>;
})}
</ul>
</div>
);
}
Спасибо! это намного лучше, чем то, как я это делал! И да, я изменю название функции, большое спасибо!
[...designers, user.key]- Эта строка будет включать в себя все дизайнеры и один идентификатор в массив -> [d1, d2, d3, ключ]. Это то, что вы ожидаете?