Блог

Я пытаюсь сохранить документы Firebase в виде массива объектов, установить состояние компонента, равное этому массиву, а затем отобразить объекты в таблице материалов, однако получаю следующую ошибку: «Объекты недопустимы в качестве дочернего элемента React (найдено: объект с ключами {секунды, наносекунды}). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив.»

 const getSamples = async (isAdmin, userID) => {
  initializeApp({
    apiKey: 'AIzaSyC64KY9UehoX2fk7Ugw2XNPvG4zZ7sSdsQ',
    authDomain: 'uno-genomics.firebaseapp.com',
    databaseURL: 'https://uno-genomics-default-rtdb.firebaseio.com',
    projectId: 'uno-genomics',
    storageBucket: 'uno-genomics.appspot.com',
    messagingSenderId: '351603848354',
    appId: '1:351603848354:web:e974a024da6b7e7472d3fb'
  });
  const db = getFirestore();

  const samples = [];
  if (isAdmin === true) {
    const querySnapshot = await getDocs(collection(db, 'samples'));
    querySnapshot.forEach((doc) => {
      const sample = {
        clientID: doc.get('clientID'),
        name: doc.get('name'),
        stage: doc.get('stage'),
        submissionDate: doc.get('submissionDate'),
        estimateCompletionDate: doc.get('estimateCompletionDate')
      };
      samples.push(sample);
    });
  } else {
    const querySnapshot = await getDocs(collection(db, 'samples'), where('clientID', '==', userID));
    querySnapshot.forEach((doc) => {
      const sample = {
        clientID: doc.get('clientID'),
        name: doc.get('name'),
        stage: doc.get('stage'),
        submissionDate: doc.get('submissionDate'),
        estimateCompletionDate: doc.get('estimateCompletionDate')
      };
      samples.push(sample);
    });
  }
  return samples;
};
 

 const Dashboard = () => {
  const [samples, setSamples] = useState([]);

  const userID = localStorage.getItem('userID');
  if (localStorage.getItem('adminMode') === 'true') {
    getSamples(true, userID).then((values) => {
      setSamples(values);
    });
  } else {
    getSamples(false, userID).then((values) => {
      setSamples(values);
    });
  }

  return (
    <>
      <Helmet>
        <title> UNO COVID Resources Collection </title>
      </Helmet>
      <MaterialTable
        columns={[
          { title: 'Client ID', field: 'clientID' },
          { title: 'Name', field: 'name' },
          { title: 'Stage', field: 'stage' },
          { title: 'Submission Date', field: 'submissionDate' },
          { title: 'Estimated Completion Date', field: 'completionDateEstimate' }
        ]}
        data={samples}
        title="Samples"
      />
    </>
  );
};
 

Я смог отобразить массив поддельных объектов, хранящихся в состоянии компонента, через таблицу материалов, поэтому ошибка должна быть как-то связана с асинхронным подключением Firebase.