React Hooks State не обновляется при использовании данных - PullRequest
Новая
       17

React Hooks State не обновляется при использовании данных

0 голосов
/ 03 мая 2019

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

Звонки проходят нормально и возвращаются с массивом данных, которые я сопоставляю.

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

import React, { useState, useEffect } from 'react';
import endsWith from 'lodash/endsWith';
import fs from 'fs';
import { promisify } from 'util';
import isEmpty from 'lodash/isEmpty';

export default function GameLibrary() {
  let [games, setGames] = useState([]);
  let [test, setTest] = useState('blue');
  const path = localStorage.getItem('gamePath');

  // reads the file location
  const readFile = promisify(fs.readdir);
  async function setupFiles() {
    return readFile(path);
  }

  async function createArray(files) {
    let gamesArray = [];
    files.forEach((file) => {
      if (endsWith(file, '.json')) {
        fs.readFile(`${path}/${file}`, 'utf-8', (err, data) => {
          if (err) return;
          const jsonData = JSON.parse(data);
          gamesArray.push(jsonData);
        });
      }
    })
    return gamesArray;
  }

  async function setup() {
    event.preventDefault();
    const files = await setupFiles();
    Promise.all([createArray(files)]).then(function(values) {
      setGames(values[0]);
    });
  }

  useEffect(() => {
    if (isEmpty(games)) {
      console.log('was empty', games);
      setup();
    }
    console.log('useEffect', games);
  });

  function testfunction(event) {
    event.preventDefault();
    if (test === 'red') {
      setTest('blue');
    }
    if (test === 'blue') {
      setTest('red');
    }
  }

  return (
    <div>
      game library
      <button style={{ background: test }} onClick={event => testfunction(event)}>test call</button>
      <button onClick={event => setup(event)}>reload</button>
      {console.log('games', games)}
      <div className="row">
        {!isEmpty(games) && games.map(game =>
          <div key={game.name} className="col border m-2 p-3">
            <p>{game.name}</p>
          </div>
        )}
      </div>
    </div>
  );
}
...