Início / coding / Perguntas / 78028429
Accepted
Razvan Zamfir
Asked: 2024-02-20 23:15:28 +0800 CST

O que causa a falha na renderização de uma matriz de objetos neste aplicativo Firebase e React?

  • 772

Estou trabalhando em um aplicativo de chat com Firebase 9 e React 18.

O UserItem.jsxcomponente fica assim:

export default function UserItem({ user }) {
  return (
    <>
      <li className="d-table-row w-100">
        <div className="user-image-container d-table-cell">
          <img src={user?.avatar} alt={`${user?.firstName} ${user?.lastName}`} className="rounded-circle" />
        </div>
        <div className="text d-table-cell">
          <h3 className="display-name m-0">{user.firstName} {user.lastName}</h3>
        </div>
      </li>
    </>
  )
}

O UsersList.jsxcomponente deve exibir o usuário com o firstNameJohn:

export default function UsersList() {

  const location = useLocation();
  const [users, setUsers] = useState([]);
  const [err, setErr] = useState(false);

  const getUsers = async () => {

    const q = query(collection(db, "users"), (where('firstName', '==', 'John'),   
      or(
        where('lastName', '==', 'Doe'),
        where('email', '==', '[email protected]')
      )));

     try {
        const querySnapshot = await getDocs(q);
        querySnapshot.forEach((doc) => {
          if (doc.data() !== null) {
            users.push(doc.data());
          } 
          setUsers(users);
          console.log(users);
        });
      } catch (err) {
        setErr(true);
      }
  }

  const usersList = () => {
    return users.map(user => (
      <UserItem
        key={user.uid}
        user={user}
      />
    ))
  }

  useEffect(() => {
    getUsers();
  }, [location, setUsers])

  return (
    <div className="chat-users">
      {!users.length ? <p className="m-0 text-center text-danger">No users found</p> : 
        <PerfectScrollbar>
          <ul className="users-list list-unstyled m-0 d-table w-100">
            {usersList()}
          </ul>
        </PerfectScrollbar>
      }
    </div>
  );
}

O problema

Embora Evan console.log(users) exiba uma série de usuários no console do Chrome, a lista de usuários não é exibida, mas em vez disso "Nenhum usuário encontrado" é visível, como se não houvesse usuários.

Questões:

  1. O que causa o problema descrito?
  2. Qual é a maneira mais confiável de consertar isso?

1 respostas

  1. Best Answer

    O problema em seu componente UsersList.jsx ocorre devido à forma como as atualizações de estado estão sendo gerenciadas na função getUsers.

    Dentro do loop forEach de getUsers, você envia diretamente os dados do usuário para a matriz de estados de usuários. Esta é uma mutação direta do estado React, isso não é recomendado porque o estado react pode ser imutável

    Você está chamando setUsers(users) dentro do loop forEach. Você está tentando atualizar o estado em cada iteração, isso também pode criar problemas.

    Após o loop, a chamada setUsers(users) não se comunica ao React sobre a mudança de estado porque os usuários ainda apontam para a mesma referência de array de antes.

    Para resolver isso, primeiro colete os usuários em uma variável local e, em seguida, atualize o estado uma vez depois que todos os usuários forem adicionados a esse array local.

    você pode fazer algo

    const getUsers = async () => {
  const q = query(collection(db, "users"), where('firstName', '==', 'John'),   
    or(
      where('lastName', '==', 'Doe'),
      where('email', '==', '[email protected]')
    ));

  try {
    const querySnapshot = await getDocs(q);
    const usersArray = []; // Use a local array to accumulate users
    querySnapshot.forEach((doc) => {
      if (doc.data() !== null) {
        usersArray.push(doc.data());
      }
    });
    setUsers(usersArray); // Update the state once after all users are added
    console.log(usersArray);
  } catch (error) {
    setErr(true);
  }
}

    Verifique também a estrutura da consulta

    • 1

relate perguntas