Saya mencoba untuk secara syarat membuat beberapa komponen dalam bereaksi, tetapi saya terus dihadapkan dengan kesalahan di bawah ini: TypeError: tidak dapat membaca properti 'Peta' dari getchannels yang tidak ditentukan ...

0
Tjm92 5 April 2021, 17:05

2 jawaban

Jawaban Terbaik

Anda perlu memeriksa docs ada sebelum Anda mencoba memetakannya. Anda juga tidak dapat membuat fungsi yang menjadikan JSX asynchronous (I.E. menggunakan await).

Coba ini. Saya telah menambahkan beberapa komentar untuk menjelaskan:

import styled from 'styled-components';
import AddIcon from '@material-ui/icons/Add';
import LanguageIcon from '@material-ui/icons/Language';
import ChannelOption from './ChannelOption';
import {firestore} from '../firebase';
import {useState, useEffect} from 'react';

const Sidebar = () => {
  const [snapshot, setSnapShot] = useState();
  useEffect(() => {
    initSnapShot();
  }, []);

  const initSnapShot = async () => {
    const snap = await firestore.collection('rooms').get();
    console.log(snap.docs[0].data());
    setSnapShot(snap);
  };

  const renderChannels = () => // functions that render JSX MUST NOT be async. The async logic already happens in `initSnapShot`.
    snapshot.docs.map(doc => { // just return this directly. The variable doesn't add anything.
      console.log(doc.data().name);
      return <ChannelOption title={doc.data().name} key={doc.id} id={doc.id}></ChannelOption>;
    });

  return (
    <SidebarContainer>
      {/* Search */}
      <SidebarSearchContainer>
        <SidebarSearch placeholder='Find or create a channel' />
      </SidebarSearchContainer>
      {/* Channels */}
      <ChannelContainer>
        <ChannelHeader>
          <ChannelHeaderText>Channels</ChannelHeaderText>
          <AddIconStyled style={{fontSize: 16}} />
        </ChannelHeader>
        {/* Make sure `docs` exists so you don't map over `undefined` */}
        {snapshot && snapshot.docs && renderChannels()} 
      </ChannelContainer>
      {/* Profile */}
      <ProfileContainer></ProfileContainer>
    </SidebarContainer>
  );
};

export default Sidebar;

1
James 5 April 2021, 14:50

Anda harus terlebih dahulu mengambil data dan mengaturnya ke negara sebelum memberikan konten apa pun;

import styled from 'styled-components';
import AddIcon from '@material-ui/icons/Add';
import LanguageIcon from '@material-ui/icons/Language';
import ChannelOption from './ChannelOption';
import { firestore } from '../firebase';
import { useState, useEffect } from 'react';

const Sidebar = () => {
  const [snapshot, setSnapShot] = useState()
  useEffect(() => {
    initSnapShot()
  }, [])

  const initSnapShot = async () => {
    const snap = await firestore.collection('rooms').get()
    console.log(snap.docs[0].data());
    setSnapShot(snap);
  }

  const renderChannels = () => {
    const rooms = snapshot.docs.map((doc) => {
      console.log(doc.data().name);
      return <ChannelOption title={doc.data().name}
        key={doc.id}
        id={doc.id}
      ></ChannelOption>
    })
    return rooms;
  }

  return (
    <SidebarContainer>
      {/* Search */}
      <SidebarSearchContainer>
        <SidebarSearch placeholder="Find or create a channel" />
      </SidebarSearchContainer>
      {/* Channels */}
      <ChannelContainer>
        <ChannelHeader>
          <ChannelHeaderText>Channels</ChannelHeaderText>
          <AddIconStyled style={{ fontSize: 16 }} />
        </ChannelHeader>
        {snapshot && renderChannels()}
      </ChannelContainer>
      {/* Profile */}
      <ProfileContainer>

      </ProfileContainer>
    </SidebarContainer>
  )
}

export default Sidebar;
0
Josh 5 April 2021, 14:58