Question

Im使电子与电子伪造和反应模板发生反应。我有一个函数，它读取目录，然后获取该文件夹中所有应用程序的列表，然后将其显示在渲染器中。

调用正常，并返回我映射的数据数组。

问题是，当应用程序最初加载时，或者当我从重新加载按钮调用安装程序时，它会删除映射的数据，如果我将其保存在代码编辑器中或使用仅更新状态不同位的测试功能按钮，重新出现视觉效果，因此数据肯定处于状态中，但是感觉状态加载得更快然后调用返回，它们都处于承诺状态，并且仅在完成后才更新状态，所以我不确定为什么它会提早关闭或为什么在更改之后，状态不再更新。

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>
  );
}

使用数据时，React Hooks状态未更新

0 个答案: