Блог

 class MyAttendees extends React.Component {
  static contextType = AuthContext;

  constructor(props){
    super(props);

    this.state = {
      barcodesData: []
    }
  }

  componentDidMount() {
    this.fetchBarcodeData() 
  }

  fetchBarcodeData() {
    const { currentUser, GetBarcodesByUser } = this.context; // getting current user logged in and a function
    const uid = currentUser.uid; // uid of the user
    GetBarcodesByUser(uid) // this will return a array of string containing barcodes id
             .then( data => this.setState({ barcodesData: data }))
  }

  // force rerender
  forceUpdater() {
    this.forceUpdate();
  }

  render() {
    return (
    <div>
          {
            // trying to render the array list 
            // this is not rerendering even after the barcodes is updated
            this.state.barcodesData.map((item) => {
              console.log("item: ", item)
              return <h1 key={item}>{item}</h1>
            })
          }
    </div>
    )
  }
}
export default MyAttendees;

 

     const GetBarcodesByUser = async ( uid: string ): string[] => {
        const data = await getBarcodesByUser(uid);
        return data;
    }
 

  export const getBarcodesByUser = async ( uid: string ): string[] => {
  const result = [];

  const q = query(collection(firestore, "qrcode"), where("uid", "==", uid));
  onSnapshot(q, (querySnapshot): string[] => {
    querySnapshot.forEach( document => {
      result.push( document.id )
    })
  })

  return resu<
}
 

Вещи, которые я пробовал

• сначала я использовал функциональный подход с useEffect.
• Я попытался использовать функцию для рендеринга массива.
• Я попытался использовать функцию выборки внутри функции componentDidMount()
• Пробовал forceUpdate Любой из вышеперечисленных методов не работает

Не 100% это была вся консоль.log итак, я предполагаю, что вы отображаете неправильный бит. Попробуйте изменить свое состояние, чтобы установить его следующим образом

 .then( response => this.setState({ barcodesData: response.data }))