Для использования метода React Hook useEffect () требуется два нажатия кнопки, чтобы обновить рендеринг и - PullRequest
Новая
       19

Для использования метода React Hook useEffect () требуется два нажатия кнопки, чтобы обновить рендеринг и

0 голосов
/ 07 февраля 2020

Существует компонент Link, который ведет к этому компоненту. Но мне нужно дважды щелкнуть ссылку, чтобы увидеть визуализацию grid_data сразу после тега div.

Кроме того, я инициализирую карту как переменную состояния и обновляю ее данными, извлеченными из Firestore. Выборка Firestore идет хорошо, поскольку это печатает данные в консоли. Я пытаюсь отобразить данные в grid_data на экране, когда эта карта не пуста после чтения, но использование функции .size не помогло.

Я новичок в React, и я пытаюсь получить 3 сетки 5x5 из Firestore и передать их компоненту PrintChallengeList для рендеринга, но это так сбивает с толку обучение async / await, hooks, Javascript и React в в то же время.

Любые другие комментарии также высоко ценятся. 

import React, { useState, useEffect } from 'react';
import firestoreRef from './FirestoreRef';
import { Switch, Route, Link } from 'react-router-dom';
import PlayGame from './PlayGame';
import PrintGrid from './PrintGrid';
import PrintChallengeList from './PrintChallengesList';

function LoadChallenge() {
  const [grid_data, setGridData] = useState({});

  useEffect(() => {
    async function load_grids_from_firebase() {
      var grid = [];
      var grid_id = null;
      await firestoreRef
        .collection('grids')
        .get()
        .then(function(querySnapshot) {
          querySnapshot.forEach(function(doc) {
            // doc.data() is never undefined for query doc snapshots
            grid_id = doc.id;
            grid.push(doc.data().array_0);
            grid.push(doc.data().array_1);
            grid.push(doc.data().array_2);
            grid.push(doc.data().array_3);
            grid.push(doc.data().array_4);
            var temp_grid_data = grid_data;
            temp_grid_data[grid_id] = grid;
            setGridData(temp_grid_data);
            grid_id = null;
            grid = [];
          });
        });
    }
    load_grids_from_firebase();
  }, [grid_data]);

  console.log('Test grid data: ', grid_data['PNQGe0QPtkI1HiwkCgT4']);
  console.log('Test grid data: ', grid_data['AzeuGUmEqHMSosKDfWr9']);
  console.log('Test grid data: ', grid_data['CJuso8gjNjUcNbhyrdyZ']);

  return (
    <div>
      {/* {grid_data.size > 0 && <p> {grid_data['PNQGe0QPtkI1HiwkCgT4'][0]} </p>} */}
      {grid_data.size && <PrintChallengeList grid_data={grid_data} />}
      <Switch>
        <Route exact path="/playgame" redirectTo="/" component={PlayGame} />
      </Switch>
      <Link
        to={{
          pathname: '/playgame',
          state: {
            grid_id: 'CJuso8gjNjUcNbhyrdyZ'
          }
        }}
      >
        Click to load this grid
      </Link>
    </div>
  );
}

export default LoadChallenge;
...