时间戳

首页 > 解决方案 > Array.length 说它是 0，即使它不是 React/Javascript/Typescript

javascript - Array.length 说它是 0，即使它不是 React/Javascript/Typescript

问题描述

我正在尝试使用 electron-json-storage 为电子应用程序存储持久数据，我尝试使用 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);

获取所有字符（）

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;

标签： javascriptreactjselectron

解决方案

GetAllCharacters应该是一个异步函数（因为它获取一些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到渲染。

推荐阅读