Array.length говорит, что это 0, даже если это не React / Javascript / Typescript

Question

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

Вот проблема: я пытаюсь получить информацию из хранилища, и когда я вызываю соответствующий метод get и выводю информацию на консоль, внутри Getmethod все выглядит нормально, даже если Я делаю console.log (Get ()), но как только я пытаюсь отобразить его или получить длину возвращенного массива, он думает, что массив пуст.

Вот мой код:

import * as React from "react";
import { Component } from "react";
import { ToastContainer } from "react-toastify";
import { connect } from "react-redux";
import GetAllCharacters from "../../scripts/GetAllCharacters";
const mapStateToProps = (state) => {
    return {
        character: state,
    };
};

const mapDispatchToProps = (dispatch) => ({});

const Sheet = (props) => {
    const [characters, setCharacters] = React.useState();
    return (
        <div className="container-fluid">
            <div className="row" style={{ marginRight: "0px" }}>
                {props.character != null ? (
                    <>
                        //Code Removed for irrelevancy
                    </>
                ) : (
                    <>
                    {console.log(GetAllCharacters()}<--prints an array of characters to the console
                    {GetAllCharacters().length}</><--returns 0 despite the fact it just printed the characters to the console
                )}
            </div>
        </div>
    );
};

export default connect(mapStateToProps, mapDispatchToProps)(Sheet);

GetAllCharacters ()

import { Character } from "../Data/Character";

function GetAllCharacters() {
    var returnCharacters: Character[] = [];
    const storage = require("electron-json-storage");

    storage.getAll(function (error, data) {
        if (error) throw error;
        Object.entries(data).map((c) => {
            returnCharacters.push(<Character>c[1]);
        });
    });
    console.log(returnCharacters);
    return returnCharacters;
}
export default GetAllCharacters;

Answer 1

GetAllCharacters должна быть асинхронной c функцией (поскольку она извлекает некоторые async данные). GetAllCharacters().length всегда будет 0, поскольку GetAllCharacters() возвращает пустой массив.

function GetAllCharacters() {
    var returnCharacters: Character[] = [];
    const storage = require("electron-json-storage");
    // ** HERE IS THE PROBLEM ** This is async. and the next line will get runned instantly and donesn't wait for it to get the data.
    storage.getAll(function (error, data) {
        if (error) throw error;
        Object.entries(data).map((c) => {
            returnCharacters.push(<Character>c[1]);
        });
    });
    // ** Now returnCharacters is empty array, and it will return it.
    console.log(returnCharacters);
    return returnCharacters;
}

вы должны исправить свою GetAllCharacters функцию, чтобы получить все результаты асинхронно, а в конце вернуть массив результатов (с callback например). а затем вы должны вызвать GetAllCharacters(result => {setCharacters(result)}) в своем компоненте, например, с useEffect, а затем привязать characters к рендерингу.